jquery仿直播app按鈕點贊特效
阿新 • • 發佈：2019-02-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>
效果大概如下：