<style>
*{padding: 0px; margin: 0px;}
div{border: 1px solid #000; overflow: hidden; position: relative;}
.main{width: 500px; height: 400px; margin: 50px auto; padding: 20px 20px; background: skyblue;}
.ma1{width: 100%; height: 300px; background: #fff;}
.ma2{width: 100%; margin-top: 30px; border-style: none;}
.ma22{width: 410px; height: 50px; font-size: 16px; }
button{ width: 66px; height: 50px;}
.ma1 p{width:100%; margin-left: 100%;position: absolute; }
</style>
上面为css样式设置, 以下为body内容 和 js代码 :
<body>
<div class="main">
<div class="ma1">
</div>
<div class="ma2">
<input type="text" class="ma22">
<button> 发送</button>
</div>
</div>
</body>
<script>
var cs=['white','green','red','skyblue','yellow','pink','blue'] //随机字体颜色
// 点击事件
$('button').click(function(){
var $h=Math.random()*$('.ma1').height(); //随机高
var index=parseInt(Math.random()*cs.length); //随机数组中的颜色
$('<p></p>')
.text($('.ma22').val())
.css({
'margin-top':$h+'px',
'color':cs[index]
})
.appendTo('.ma1'); //将值追加到屏幕div中
$('.ma22').val(''); //清空
//添加效果
$('p').delay(500).animate({ //延迟
'margin-left':'-100%',
},9000,'linear'); //匀速
});
//键盘回车事件
$('.ma22').keyup(function(e){
if(e.keyCode==13){
$('button').click(); //调用
}
});
</script>