jquery实现弹幕效果的代码如下：
<!doctype html><html> <head> <meta charset="utf-8" /> <title>jq实现弹幕效果</title> <style type="text/css"> *{ padding: 0; margin: 0; } #box{ height:700px; width:1000px; margin: 0 auto; border:1px solid #000000; position: relative; } #main{ width:100%; height:605px; position: relative; overflow: hidden; } p{ position: absolute; left:1000px; width:200px; top:0; } #bottom{ width:100%; height:80px; background: #abcdef; text-align: center; padding-top: 15px; position: absolute; left: 0; bottom: 0; } #txt{ width:300px; height:50px; } #btn{ width:100px; height:50px; } </style> </head> <body> <p id="box"> <p id="main"> </p> <p id="bottom"> <input type="text" id="txt" placeholder="请输入内容" /> <input type="button" id="btn" value="发射" /> </p> </p> <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script> <script type="text/javascript"> $(function(){ var pageh=parseint($(#main).height()); var colorarr=[#cfaf12,#12af01,#981234,#adefsa,#db6be4,#f5264c,#d34a74]; $(#btn).bind(click,auto); document.onkeydown=function(e){ if(e.keycode == 13){ auto(); } }; function auto(){ var $value = $(#txt).val(); $(#main).append(<p> + $value + </p>); $(#txt).val(); var _top=parseint(pageh*(math.random())); var num=parseint(colorarr.length*(math.random())); $(p:last-child).css({top:_top,color:colorarr[num],font-size:20px}); $(p:last-child).animate({left:-200px},10000); $(p:last-child).stop().animate({left:-300px},10000,linear,function(){ $(this).remove(); }); //console.log($value); }; }) </script> </body></html>
相关文章推荐：
利用js实现一个可精确到10ms的秒表的制作（附代码）
如何使用原生javascript实现轮播图？代码详解
以上就是jquery如何实现弹幕？jquery实现弹幕效果的代码的详细内容。