JS框架_(JQuery.js)点赞按钮动画
Posted Cynical丶Gary
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JS框架_(JQuery.js)点赞按钮动画相关的知识,希望对你有一定的参考价值。
百度云盘 传送门 密码: 0ihy
点赞按钮动画效果:
(点击一次随机生成一颗小爱心,作为点赞动画~)
<!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)点赞按钮动画的主要内容,如果未能解决你的问题,请参考以下文章