点赞按钮动画效果：
(点击一次随机生成一颗小爱心，作为点赞动画~)
<!doctype html><html lang="en"><head><meta charset="UTF-8" /><title>jQuery点赞按钮动画特效代码</title> <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: #EE4000; color: #fff; position: absolute; bottom: 100px; left: 50%; margin-left: -50px; }</style></head><body><div class="demo"></div><input id="btn1" type="button" class="btn" value="Gary" /><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() * 3 + 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:"800px", ???????????opacity:"0", ???????????left: rand, ???????},3000) ??????????})}) </script></body></html>实现过程：
三张资源图片就能实现的点赞动画效果
设置图片和按钮样式
<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: #EE4000; color: #fff; position: absolute; bottom: 100px; left: 50%; margin-left: -50px; }</style>随机选中其中一长图片
???var num = Math.floor(Math.random() * 3 + 1);
让生成图片出现在随机位置值
var rand = parseInt(Math.random() * (x - y + 1) + y)
设置图片透明度和生成位置
???????$("img").animate({ ???????????bottom:"800px", ???????????opacity:"0", ???????????left: rand, ???????},3000)为按钮添加点击事件
$(function () { ??????????????$("#btn1").click(function(){ ???????var x = 100; ??????????????var y = 900; ?????????var num = Math.floor(Math.random() * 3 + 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:"800px", ???????????opacity:"0", ???????????left: rand, ???????},3000) ??????????})}) js.append() ：使用函数在指定元素的结尾插入内容
$(".demo").append("<img src=‘‘>")点击按钮后生成图片
js.attr() ：函数返回选择元素的属性值
$(‘img:eq(‘ + index + ‘)‘).attr(‘src‘,‘images/‘+num+‘.png‘)随机选中一章心形特效产生
jQuery animate() ：animate() 方法执行 CSS 属性集的自定义动画
opacity：设置一个元素的透明度级别
JS框架_(JQuery.js)点赞按钮动画
原文地址：https://www.cnblogs.com/1138720556Gary/p/9383970.html