在別人網站中看到一個類似於彈幕的效果，閑來無事用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 9分鍾前注冊成功</li> 30 <li>152***92244 12分鍾前注冊成功</li> 31 <li>159***92932 15分鍾前注冊成功</li> 32 <li>139***04555 21分鍾前注冊成功</li> 33 <li>155***59509 23分鍾前注冊成功</li> 34 <li>135***93950 29分鍾前注冊成功</li> 35 <li>155***52421 29分鍾前注冊成功</li> 36 <li>132***22029 29分鍾前注冊成功</li> 37 <li>155***42959 35分鍾前注冊成功</li> 38 <li>155***09954 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>