直播聊天室,点亮效果,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);
}

准备好星型图片,
422101-20170329141832451-1513234445.png


本文转自TBHacker博客园博客,原文链接:http://www.cnblogs.com/jiqing9006/p/6639558.html,如需转载请自行联系原作者

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值