JQ实现弹幕效果

JQ实现弹幕效果，快来吐糟你的想法吧

效果图：

代码如下，复制即可使用：

<!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><div id="box"><div id="main"></div><div id="bottom"><input type="text" id="txt" placeholder="请输入内容" /><input type="button" id="btn" value="发射" /></div></div><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>