关于弹幕效果的实现

视频在网络上是必不可少的，那么随之而来的就是大家的评论啊或者是弹幕效果都是现在常见的，所以今天写一个弹幕效果，来看代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{margin:0;padding:0;}
        .content{position:relative;height:auto;width:100%;}
        .bottomcon{position:absolute;bottom:0;left:0;width:100%;padding:20px 0;background-color: #ccc;text-align: center}
        .txt{border:1px solid #ff6b0e;height:35px;line-height:35px;border-radius:5px;background:none;outline: 0;padding:0 10px;}
        .btn{padding:8px 20px;cursor:pointer;border-radius:5px;background: #ff6b0e;border:none;color:#fff;font-size:16px;outline: 0;}
        span{position:absolute;}
    </style>
</head>
<body>
    <div class="content">
        <div class="bottomcon">
            <label>弹幕：</label>
            <input type="text" class="txt" id="txt"/>
            <button class="btn">发布</button>
        </div>
    </div>
</body>
<script src="js/jquery-1.11.3.min.js"></script>
<script>
    $(function(){

        var colors=["#FF6B0E","#FF413E","#ff0ecb","#760eff","#0e90ff","#0eff90","#97ff0e","#ffd60e"];
        $(".content").css("height",$(window).height()+"px");//获取屏幕高度，是为了让bottomcon处于最下方
        $(".btn").click(function(){
            var randomColor=parseInt(Math.random()*colors.length);//设置随机颜色
            var randomYh=parseInt(Math.random()*500);//设置随机高度

            $("<span></span>").text($("#txt").val()).css("color",colors[randomColor]).css("left","1300px").css("top",randomYh).animate({left:-500},10000,"linear",function(){
              　　$(this).remove();
            })

            .appendTo(".content");//添加到content里
            $("#txt").val("");//随即清空input内容
        });
        //开启键盘keyup触发事件
        $("#txt").keyup(function(e){
            if(e.keyCode==13){
                $(".btn").click()
            }
        })
    })
</script>
</html>

以上效果实现的过程中涉及到了先创建span，然后向span里设置内容也就是$("#txt").val()，接下来就是给这些个内容设置了一系列的css值，然后给animate动画让其出来，移动过程中到左边屏幕让其remove掉，最后将其添加到content里即可，剩下的就是一些修饰等等，大概思路就是如此。这个案例也充分体现了jquary的链式操作的强大之处，也就是说通过这一句代码就实现了较为复杂的效果。好了，看下效果：

只能截张图片看看了，大概效果就是如此，有兴趣的可以将代码拷贝一下实施看哦！当然要注意引用jquary的路径~