jQuery实现弹幕效果

首先，这个布局比较简单，一个弹幕墙，下面放一个输入框和两个按钮，其中一个按钮用于发送弹幕，另一个用于清除屏幕上的弹幕，布局效果如图

接下来是实现点击“post”按钮将输入框中的内容发送出去，由于弹幕都是从右边往左边移动，所以在设置弹幕的CSS时候需要进行如下设置：

.danmu {
  position: absolute;
  font-size: 20px;
  right: 0;
  z-index: 1;
}

这里没有对top进行赋值是希望通过脚本对其进行随机赋值。js中比较关键的两条是：

    var randomPos=Math.floor((parseInt($("#screen").innerHeight())-40)*Math.random())-20;
    var randomColor=""+Math.floor(Math.random()*255).toString(16)+Math.floor(Math.random()*255).toString(16)+Math.floor(Math.random()*255).toString(16);

这两条分别用于产生一个随机高度和一个随机颜色，然后在后面将其用于弹幕的样式。样式设置好了以后，将这个新元素放在弹幕墙上

$danmu .css({"top":randomPos+"px",
                  "color":"#"+randomColor});
$danmu.text(text);
$danmu.prependTo("#screen");
$edit.val("");//clear input

这时，我们的弹幕以一个随机高度和随机颜色出现在了弹幕墙的右侧，接下来要让这个弹幕移动起来，使用jQuery的animate()方法进行实现。

$danmu.animate({left:-pWidth},10000,function(){
      $(this).remove();
    });

回调函数中，执行完动画以后这个元素会自动消失。最终效果：