直播聊天室,点亮效果,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,如需转载请自行联系原作者

相关文章
|
JavaScript 前端开发 CDN
HTML + jQuery 实现轮播图
HTML + jQuery 实现轮播图
288 0
HTML + jQuery 实现轮播图
|
JavaScript
Jquery实现表格动态增加一行,删除一行(最简洁的代码实现)
Jquery实现表格动态增加一行,删除一行(最简洁的代码实现)
542 0
Jquery实现表格动态增加一行,删除一行(最简洁的代码实现)
|
前端开发 JavaScript
【jquery ajax】实现文件上传提交
【jquery ajax】实现文件上传提交
265 0
【jquery ajax】实现文件上传提交
|
JavaScript
利用jquery的attr方法一行代码实现的简单的图片切换效果
利用jquery的attr方法一行代码实现的简单的图片切换效果
156 0
利用jquery的attr方法一行代码实现的简单的图片切换效果
|
JavaScript
jquery实现单击div切换背景,再次单击回到原来样式
jquery实现单击div切换背景,再次单击回到原来样式
188 0
jquery实现单击div切换背景,再次单击回到原来样式
|
JavaScript
jQuery实现判断li的个数从而实现其他功能
jQuery实现判断li的个数从而实现其他功能
106 0
jQuery实现判断li的个数从而实现其他功能
|
JavaScript 搜索推荐 API
JQuery+ajax实现类似百度搜索自动匹配功能
JQuery+ajax实现类似百度搜索自动匹配功能
350 0
JQuery+ajax实现类似百度搜索自动匹配功能
|
缓存 JavaScript 前端开发
JavaScript、jQuery实现“社区便利店收银系统”
随着个性化服务发展,学校、街边、社区等都流行将水果等商品洗净、切好,并装盒,按份出售。现开发一个“社区便利店收银系统”,店中每天提供固定种类的水果,装盒后,标记每一份价格,按份进行销售。在系统中,打开收银网页(casher.html),点击“+”添加销售水果,点击“结账”进行购买水果结算,点击“完成交易”进行下一个新用户购买。
464 0
JavaScript、jQuery实现“社区便利店收银系统”
|
JavaScript 前端开发
jQuery实现表格行的删除和增加
使用jQuery实现对表格元素行的删除和增加效果
265 0
jQuery实现表格行的删除和增加
|
JavaScript 前端开发
jQuery实现瀑布流布局
(waterfall) 瀑布流布局是一种流行的网页布局方式,是指元素在页面的布局中像瀑布一样从上到下布局,即多行等宽元素排列,后面的元素依次添加到其后,等宽不等高,根据图片原比例缩放直至宽度达到我们的要求,依次按照规则放入指定位置。
179 0
jQuery实现瀑布流布局