此处使用HBuilder编译，最简单的弹幕效果，希望各位前辈不吝指教。
注意用的是jquery-2.0.3.js
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <style type="text/css"> *{ padding: 0; margin: 0; } .shooter{ width: 600px; height: 60px; /*background: black;*/ margin: 0 auto; } .shooter input{ width: 300px; height: 40px; border: none; border-radius: 7px; box-shadow: 0 0 8px rgba(182,195,214,0.6)inset; padding-left: 15px; margin-top: 10px; } .shooter button{ width: 80px; height: 40px; border: none; margin-left: 10px; background-color:#339B53; border-radius:8px; color: white; cursor: pointer; } .shooter button:hover{ font-size: 14px; background:#008000; } .content{ width: 100%; height: 600px; background: gray; position: relative; overflow: hidden; } .bullet{ position: absolute; /*right: 0;*/ /*left:1600px;*/ word-break: keep-all; /*不让单词折行*/ } </style> <body> <div> <input type="text"/> <button>发射</button> </div> <div> </div> <script type="text/javascript" src="https://www.jb51.net/js/jquery-2.0.3.js" ></script> <script type="text/javascript"> $("button").click(function(){ var msg = $("input").val(); //取出输入框内容 if(msg.length > 15){ alert("字数不得超过15个！"); return; } var bullet = $("<div>"); //生成一条弹幕 bullet.text(msg); //将输入框内容放置到div中 bullet.addClass("bullet"); //为bullet这个div添加样式bullet bullet.css("top",Math.round(Math.random()*500)); //随机设置弹幕位置 bullet.css("left","1600px"); bullet.css("font-size",Math.round(Math.random()*60)+12+"px"); bullet.css("color","rgb("+Math.round(Math.random()*255)+","+Math.round(Math.random()*255)+","+Math.round(Math.random()*255)+")"); // alert(window.getComputedStyle(bullet,null).width); bullet.animate({ left:-1000//此处视为bug，应该随着弹幕的长短而变化 },Math.round(Math.random()*9000)+1000,"linear", function(){ bullet.remove(); //当运动结束时，删除弹幕 }); $(".content").append(bullet); //将弹幕添加到屏幕中 }); </script> </body> </html>
下面是展示的弹幕效果（显示的白线在谷歌浏览器中是看不出来的，在录制时会看出来，此处又一bug）：
