jquery仿直播app按钮点赞特效

来源：互联网发布：mac桌面图标怎样缩小编辑：程序博客网时间：2024/05/18 00:06

<!doctype html><html lang="en"><head><meta charset="UTF-8" /><title>jQuery仿直播app按钮点赞特效</title><meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><style type="text/css">img{ width: 20px; height: 20px; position: absolute; bottom: 100px; left: 50%; margin-left: -10px; }.btn{ width: 100px; height: 30px; border:0; background: red; color: #fff; position: absolute; bottom: 100px; left: 50%; margin-left: -50px; font-family: "微软雅黑";line-height: 28px;border-radius: 4px;}</style></head><body><div class="demo"></div><input id="btn1" class="btn" type="button" value="变换" /><script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">$(function () {   $("#btn1").click(function(){var x = 100;       var y = 900;  var num = Math.floor(Math.random() * 5 + 1);var index=$('.demo').children('img').length;var rand = parseInt(Math.random() * (x - y + 1) + y); $(".demo").append("<img src=''>");$('img:eq(' + index + ')').attr('src','images/'+num+'.png')$("img").animate({bottom:"800",opacity:"0",left: rand,},3000)   });});</script></body></html>

效果大概如下：

0 0