jquery 实现类似于弹幕效果

在别人网站中看到一个类似于弹幕的效果，闲来无事用jquery写了个备用~~

 1 <!DOCTYPE html>
 2 <meta charset="utf-8">
 3 <html>
 4 <head>
 5     <title></title>
 6     <script src="http://cdn.gbtags.com/jquery/1.8.0/jquery-1.8.0.min.js"></script>
 7 
 8     <style type="text/css">
 9         .scroll li {
10             position: fixed;
11             display: inline-block;
12             top: 70%;
13             left: 100%;
14             color: #fff;
15             white-space: nowrap;
16             font-size: 14px;
17             text-align: center;
18             z-index: 100;
19             background: rgba(0,0,0,0.5);
20             padding: 5px 25px;
21             border-radius: 20px;
22             font-size: 16px;
23             list-style: none;
24         }
25     </style>
26 </head>
27 <body>
28     <ul class="scroll">
29         <li>156***91112&nbsp;&nbsp;  9分钟前注册成功</li>
30         <li>152***92244&nbsp;&nbsp;  12分钟前注册成功</li>
31         <li>159***92932&nbsp;&nbsp;  15分钟前注册成功</li>
32         <li>139***04555&nbsp;&nbsp;  21分钟前注册成功</li>
33         <li>155***59509&nbsp;&nbsp;  23分钟前注册成功</li>
34         <li>135***93950&nbsp;&nbsp;  29分钟前注册成功</li>
35         <li>155***52421&nbsp;&nbsp;  29分钟前注册成功</li>
36         <li>132***22029&nbsp;&nbsp;  29分钟前注册成功</li>
37         <li>155***42959&nbsp;&nbsp;  35分钟前注册成功</li>
38         <li>155***09954&nbsp;&nbsp;  45分钟前注册成功</li>
39     </ul>
40 </body>
41 <script>
42     var num = 0;
43     var arrColor = ['#5dd9ff','#fbe091','#ff0','#b5d8f4','#0f0','#0ff','#83dd57','#fff','#b4f4ff','#ccc','#fff'];
44     function suiji() {
45         $('.scroll li').eq(num).css('color',arrColor[parseInt(10*Math.random())]);
46         $('.scroll li').eq(num).animate({'left':-300},20000,function () {
47             $('.scroll li').eq(num).css('left','100%');
48         });
49     }
50     
51     suiji();
52     
53     setInterval(function () {
54         num++;
55         if (num>=10) {
56             num = 0;
57         }
58         suiji();
59     },22000);
60 
61 </script>
62 </html>

 

posted @ 2016-08-16 16:54  前端[色色]  阅读(5932)  评论(0)  编辑  收藏  举报