Home >Web Front-end >JS Tutorial >jQuery realizes the random number display animation effect of likes (with online demonstration and demo source code download)_jquery
The example in this article describes the animation effect of random number display of likes implemented by jQuery. Share it with everyone for your reference, the details are as follows:
The screenshot of the running effect is as follows:
Click here to view Online Demo.
Click here for complete example codeDownload from this site.
The specific code is as follows:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>jQuery实现点赞数字累加动画效果</title> <style type="text/css"> *{margin:0;padding:0;list-style-type:none;} a,img{border:0;} html,body{background:#fff;font-size:14px;font-family:"microsoft yahei";} .tip{text-align:center;padding-top:10%;font-size:2em;} </style> <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script> <script type="text/javascript"> $("html,body").on("click",function(e){ anp(e); }) function anp(e){ var n=Math.round(Math.random()*10); var $i=$("<b>").text("+"+n); var x=e.pageX,y=e.pageY; $i.css({top:y-20,left:x,position:"absolute",color:"#E94F06"}); $("body").append($i); $i.animate({top:y-180,opacity:0,"font-size":"1.4em"},1500,function(){ $i.remove(); }); e.stopPropagation(); } </script> </head> <body> <div class="tip">点击页面任意位置查看效果</div> </body> </html>
I hope this article will be helpful to everyone in jQuery programming.