<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>
转发请注明原作者,谢谢合作!!!