炫酷的弹幕评论技术,利用jQuery的animate动画效果实现——w3cdream|前端学习-开发

'I'm W3cdream,创造',前·所·未·有
炫酷的弹幕评论技术,利用jQuery的animate动画效果实现

发布作者:萧强   发布时间:2015-04-15   阅读次数:6918

 炫酷的弹幕评论技术,利用jQuery的animate动画效果实现,文字可以随机变化颜色哦






<!doctype html>
<html>
        <head>
                <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
                <title>Java开发视频弹幕技术SreenText</title>
                <meta name="Keywords" content="关键词,关键词">
                <meta name="description" content="Version-1.0">
                <style type="text/css">
                        *{margin:0;padding:0;}
                        body{background:#09c;font-size:12px;font-family:"微软雅黑";}
                        /*screen start*/
                        #click_screen{width:100px;height:40px;display:block;border:0;text-align:center;line-height:40px;text-decoration:none;font-size:21px;color:#fff;font-family:"微软雅黑";position:absolute;top:20px;left:20px;}
                        .screen{width:100%;height:100%;position:absolute;left:0;top:0;display:none;}
                        .screen .s_dm{} 
                        .screen .s_dm .s_close{width:100px;height:40px;display:block;border:0;text-align:center;line-height:40px;text-decoration:none;font-size:21px;color:#c0c0c0;font-family:"微软雅黑";position:absolute;top:20px;right:20px;z-index:3;}        
                        .screen .s_dm .s_close:hover{color:#fff;}
                        .screen .s_dm .s_show{position:relative;z-index:2;}
                        .screen .s_dm .s_show div{line-height:36px;font-size:24px;font-weight:bold;position:absolute;top:0;left:0;}
                        .screen .send{width:100%;height:80px;background:#000;position:absolute;bottom:0;z-index:2;}
                        .screen .send .s_con{width:100%;height:80px;text-align:center;line-height:80px;}
                        .screen .send .s_con .s_txt{width:700px;height:40px;border:0;font-size:18px;font-family:"微软雅黑";padding-left:12px;border-radius:3px 0 0 3px;outline:none;}
                        .screen .send .s_con .s_btn{width:100px;height:40px;background:#088;border:0;font-size:18px;font-family:"微软雅黑";color:#fff;cursor:pointer;border-radius:0 3px 3px 0;outline:none;}
                        .screen .send .s_con .s_btn:hover{background:#006c6c;}
                        .screen .s_dm .mask{width:100%;height:100%;position:absolute;top:0;left:0;background:#000;opacity:0.5;filter:alpha(opacity=50);z-index:1;}
                        /*end screen*/
                </style>
        </head>

<body>
        <a href="#" id="click_screen">点击弹幕</a>
        <!--screen start-->
        <div class="screen">
                <!--s_dm start-->
                <div class="s_dm">
                        <a href="#" class="s_close">退出弹幕</a>
                        <div class="mask"></div>
                        <div class="s_show">
                                
                        </div>
                </div>
                <!--end s_dm-->
                <!--send start-->
                <div class="send">
                        <div class="s_con">
                                <!--两个元素同时使用时,不加回车可以避免两者间的空隙出现-->
                                <input type="text" class="s_txt"/><input type="button" class="s_btn" value="发表评论"/>
                        </div>
                </div>
                <!--end send-->
        </div>
        <!--end screen-->

<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>
<script type="text/javascript">
        $(function(){

                
                //点击展开
                $("#click_screen").click(function(){
                        $(".screen").toggle(600);
                        
                });
                $(".s_close").click(function(){
                        $(".screen").toggle(600);
                        
                });
                
                //发表评论
                $(".s_btn").click(function(){
                        var text=$(".s_txt").val();
                        $(".s_show").append("<div>"+text+"</div>");
                        init_screen();
                });

                $(".s_txt").keydown(function(){
                        var code = window.event.keyCode;

                        //alert(code);

                        if(code == 13)//回车键按下时,输出到弹幕

                        {
                                var text=$(".s_txt").val();
                                $(".s_show").append("<div>"+text+"</div>");
                                init_screen();
                        }
                });
                
        });
        
        //初始化弹幕
        function init_screen(){
                var _top=0;

                $(".s_show").find("div").show().each(function(){
                        var _left=$(window).width()-$(this).width();
                        var _height=$(window).height();
                        
                        _top=_top+80;

                        if(_top>_height-100){
                                _top=80;
                        }
                
                        var time=10000;
                        if($(this).index()%2==0){
                                time=20000;
                        }
                        //设定文字的初始化位置
                        $(this).css({left:_left,top:_top,color:getRandomColor()});
                        $(this).animate({left:"-"+_left+"px"},time,function(){
                                
                        });


                });
        }

        //随机获取颜色值
        function getRandomColor(){
                return '#'+(function(h){
                        return new Array(7-h.length).join("0")+h
                })((Math.random()*0x1000000<<0).toString(16))
        }

</script>
</body>
</html>
原文出自:http://www.w3cfuns.com/blog-5464392-5405083.html


常用昵称:萧强,全端布道者

姓名:“刘晓强”,W3CDream创始人,目前就职于易点付。专注于web前端和移动端方面知识的研究,熟练掌握photoshop和AI,喜爱Flat UI设计和Metro UI风格,熟练掌握CSS3+HTML5技术、LESS CSS和Sass CSS,还有jQuery框架方面及一些前端框架bootstrap响应式设计等。新浪微博
友荐云推荐

CSS3直通车

热点文章

新闻资讯

标签云

友情赞助