直播聊天室,点亮效果,jquery实现
1.css
#like_area img{
width: 30px;
height: 30px;
position: absolute;
bottom: 100px;
left: 60%;
margin-left: -10px;
}
2.div
<div id="like_area"></div>
3.点击事件处理
// 点亮
function like() {
var x = 100;
var y = 900;
var num = Math.floor(Math.random() * 4 + 1); // 随机数
var index=$('#like_area').children('img').length; // 获取最新的img长度
var rand = parseInt(Math.random() * (x - y + 1) + y); // 飘离的位置
$("#like_area").append("<img style='margin-left: 40px;' src='../image/like/"+num+".png'>");
$("#like_area img").animate({
bottom:"350px",
opacity:"0",
left: rand,
},3000);
}
准备好星型图片,