用jquery写了一个弹幕的小功能，供大家参考学习。
前端显示
<span style="font-size:18px;"><div class="boxDom" id="boxDom"> <div class="idDom" id="idDom"> <div class="content"> <p class="title">吐槽:</p> <input type="text" class="text" id="text" /> <button type="button" class="btn" id="btn">发射</button> </div> </div> </div></span> 样式 <span style="font-size:14px;">html,body{margin:0px;padding:0px;width: 100%;height:100%;font-family: "微软雅黑";font-size: 62.5%;background: #ccc;} .boxDom { width:100%; height: 100%; position: relative; overflow: hidden; } .idDom { width: 100%; height: 60px; background: #666; position: fixed; bottom: 0px; } .content { display: inline-block; width:430px; height: 40px; position: absolute; left: 0px; right: 0px; top:0px; bottom:0px; margin:auto; } .title { display: inline; font-size: 4em; vertical-align:bottom; color:#fff; } .text { border:none; width:300px; height: 30px; border-radius: 5px; font-size: 2.4em; } .btn { width:60px; height: 30px; background: #f90000; border:none; color:#fff; font-size: 2.4em; } .string { width:300px; height: 40px; position: absolute; overflow: hidden; color:#000; font-size: 4em; line-height: 1.5em; cursor: pointer; white-space:nowrap; }</span>JS
<span style="font-size:14px;"> $(function(){ var pageW=parseInt($(document).width()); //获取页面宽度 //alert(pageW); var pageH=parseInt($(document).height()); //获取页面高度 var boxDom=$("#boxDom"); var btnDom=$("#btn"); var Top,Right; var width; width=pageW; var colorArr=["#cfaf12","#12af01","#981234","#adefsa","#db6be4","#f5264c","#d34a74"]; btnDom.bind("click",auto); function auto(){ var creSpan=$("<span class='string'></span>"); var text=$("#text").val(); //alert(text); creSpan.text(text); //alert(creSpan.text()); Top=parseInt(pageH*(Math.random())); var num=parseInt(colorArr.length*(Math.random())); if(Top>pageH-90){ Top=pageH-90; } //creSpan.css({"top":Top,"right":-300,"color":colorArr[num]}); creSpan.css({"top":Top,"right":-300,"color":getRandomColor()});//扩展字幕颜色 boxDom.append(creSpan); var spanDom=$("#boxDom>span:last-child"); //alert(spanDom.html()); spanDom.stop().animate({"right":pageW+300},10000,"linear",function(){ $(this).remove(); }); } function getRandomColor(){ return '#' + (function(h){ return new Array(7 - h.length).join("0") + h; })((Math.random() * 0x1000000 << 0).toString(16)); } });</span>看一张效果图：效果还可以，当然还有需要改进的地方，比如弹幕出现在了底部的需要重新计算Top的值；另外想抽时间利用Ajax设计数据库，对发言的数据进行后台保存。
