JQ实现弹幕效果
JQ实现弹幕效果
代码如下，复制即可使用：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title>JQ实现弹幕效果</title> 6 <style type="text/css"> 7 *{ 8 padding: 0; 9 margin: 0; 10 } 11 #box{ 12 height:700px; 13 width:1000px; 14 margin: 0 auto; 15 border:1px solid #000000; 16 position: relative; 17 } 18 #main{ 19 width:100%; 20 height:605px; 21 position: relative; 22 overflow: hidden; 23 } 24 p{ 25 position: absolute; 26 left:1000px; 27 width:200px; 28 top:0; 29 } 30 #bottom{ 31 width:100%; 32 height:80px; 33 background: #ABCDEF; 34 text-align: center; 35 padding-top: 15px; 36 position: absolute; 37 left: 0; 38 bottom: 0; 39 } 40 #txt{ 41 width:300px; 42 height:50px; 43 } 44 #btn{ 45 width:100px; 46 height:50px; 47 } 48 </style> 49 </head> 50 <body> 51 <div id="box"> 52 <div id="main"> 53 54 </div> 55 <div id="bottom"> 56 <input type="text" id="txt" placeholder="请输入内容" /> 57 <input type="button" id="btn" value="发射" /> 58 </div> 59 </div> 60 <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script> 61 <script type="text/javascript"> 62 $(function(){ 63 var pageH=parseInt($("#main").height()); 64 var colorArr=["#cfaf12","#12af01","#981234","#adefsa","#db6be4","#f5264c","#d34a74"]; 65 $("#btn").bind("click",auto); 66 document.onkeydown=function(e){ 67 if(e.keyCode == 13){ 68 auto(); 69 } 70 }; 71 function auto(){ 72 var $value = $("#txt").val(); 73 $("#main").append("<p>" + $value + "</p>"); 74 $("#txt").val(""); 75 var _top=parseInt(pageH*(Math.random())); 76 var num=parseInt(colorArr.length*(Math.random())); 77 $("p:last-child").css({"top":_top,"color":colorArr[num],"font-size":"20px"}); 78 $("p:last-child").animate({"left":"-200px"},10000); 79 $("p:last-child").stop().animate({"left":"-300px"},10000,"linear",function(){ 80 $(this).remove(); 81 }); 82 //console.log($value); 83 }; 84 85 }) 86 </script> 87 </body> 88 </html>
链接：https://mp.weixin.qq.com/s/uxtHkWhFlU-PjKH5jsBnog
