用Jquery+CSS实现网页弹幕

实现效果：

Html

 1 <html>
 2 
 3 <head>
 4     <script type="text/javascript" src="js/jquery.min.js"></script>
 5     <script type="text/javascript" src="js/index.js"></script>
 6 </head>
 7 <style>
 8     body{
 9         margin: 0;
10         width:100%;
11         height:100%;
12     }
13     .box{
14 　　　　width: 100%;　　
15 　　　　height:80%;
16 　　　　z-index: 50;
17 　　}
18     .show{
19 　　　　　top:0;
20 　　　　　left:0;
21         width: 100%;
22         height:50%;
23         opacity:0.9;//改变值可以改变弹幕的透明度
24 　　　　　z-index:100;//实际上就是两个div，一个在上显示，一个在下显示，z-index就是设置显示的优先级，值越大优先级越高
25     }
26     span{
27         position: absolute;
28         font-size: 20px;
29     }
30 </style>
31 
32 <body>
33     <div class="box">
34         <div class="show"></div>
35     </div>
36 
37     <div>
38         <input type="text" id="msg">
39         <button id="send">发送</button>
40     </div>
41 </body>
42 </html>
43 
44 JS：
45 $(function () {
46     $('#send').click(sendMsg);
47 });
48 function sendMsg() {
49     var msg=$('#msg').val();
50     var span="<span style='color:"+getColor()+";right:0;top:"+getTop()+"; '>"+msg+"</span>";
51     span=$(span);
52     $('.show').append(span);
53 　　　//动画效果
54     span.stop().animate({'right':getRight(span)},8000,'linear',function () {
55         $(this).remove();
56     });
57 
58 }
59 //获取随机字体颜色
60 function getColor() {
61     var colorArr=["#cfaf12","#12af01","#981234","#adefsa","#db6be4","#f5264c","#d34a74"];
62     var index=parseInt(colorArr.length*Math.random());
63     return colorArr[index];
64 }
65 //获取弹幕出现的随机高度位置
66 function getTop() {
67     var pageH=parseInt($('.show').height());
68     var top=parseInt(pageH*Math.random());
69     if (top>=pageH-20){
70         top=top-20;
71     }
72     return top;
73 }
74 //获取动画的宽度最大值
75 function getRight(span) {
76     var width=span.width();
77     var pageW=parseInt($('.show').width());
78     var w=pageW-width;
79     return w;
80 }