jQuery实现随机颜色弹幕墙

<style type="text/css">
　　html,body{ width: 100%; height: 100%; margin: 0; padding: 0; font-size: 62.5%;}
　　.boxDom{ width: 100%; height: 100%; position: relative; overflow: hidden;}
　　.idDom{ position: fixed; bottom: 0px; width: 100%; height: 100px; background: #666;}
　　.content{ display: inline-block; width: 365px; height: 30px; position: absolute; left: 0; right: 0; bottom: 0; top: 0; margin: auto;}
　　.txt{border: none; width: 280px; height: 20px; padding: 5px 10px; border-radius: 6px; outline: none;}
　　.btn{ width: 60px; height: 30px; background-color: #f90000; color: #fff; border: none;}
　　span{ width: 300px; height: 40px; position: absolute; font-size: 30px;}
</style>

<div class="boxDom" id="boxDom">
　　<div class="idDom">
　　<div class="content">
　　　　<input type="text" id="txt" class="txt" />
　　　　<input type="button" value="发送" id="btn" class="btn" />
　　</div>
　　</div>
</div>
<script type="text/javascript">
　　$(function(){
　　　　var colors=["red","green","pink","yellow","purple","blue","cyan","skyblue"];
　　　　$("#btn").click(function(){
　　　　var randomColor = parseInt(Math.random()*colors.length);
　　　　var randomY=parseInt(Math.random()*400);
　　　　$("<span></span>")//创建元素 
　　　　.text($("#txt").val())//设置元素内容为输入的内容
　　　　.css("color",colors[randomColor])//设置字体颜色
　　　　.css("left","1400px")//设置left位置
　　　　.css("top",randomY)//设置top值
　　　　.animate({left:-600},10000,"linear",function(){
　　　　//运动到了终点删除span
　　　　$(this).remove();
　　　　}).appendTo($("#boxDom"));
　　　　$("span").mouseover(function(){
　　　　$(this).stop();
　　　　})
　　　　$("span").mouseout(function(){
　　　　　　$(this).animate({left:-600},10000,"linear",function(){
　　　　　　　　//运动到了终点删除span
　　　　　　　　$(this).remove();
　　　　　　})
　　　　})
　　　　$("#txt").val("");
　　　　})
　　});
　　$("#txt").keyup(function(e){
　　　　if(e.keyCode==13){
　　　　　　$("#btn").click();//让按钮触发单击事件
　　　　}
　　});
</script>

转发请注明原作者，谢谢合作！！！