基于JQuery的数字改变的动画效果--可用来做计数器

因为要求是动态的，我就想到了应该是位置的变化，想到之前用过的JQuery，把里边的效果全试了试，最后选用了animate自定义，代码如下：复制代码代码如下: <html> <head> <title>testAnimate</title> <script type="text/javascript"> function changeNum(n) { //n设为想要改成的数字 $(function () { $("counter").animate({ top: '+=20px', opacity: '0' }, "slow", function () { //让数字向下移动并消失，top为元素距网页顶部距离，opacity为透明度，值为0~1 document.getElementById("counter").innerHTML = n; //等数字消失后变为n，网页里有id为counter的一个span元素，这段代码必须放在animate里边，否则数字消失之前它的数值就改变了 }) .animate({ top: '-=40px' }, "slow") //数字n跳至原来位置的上方 .animate({ top: '+=20px', opacity: '1' }, "slow"); //数字n出现并落至数字原来位置，opacity为0时是对象完全透明，就是消失，值为1时是完全显现 }); } </script> </head> <body> <span id="counter">1</span> </body> </html> 我只是新手，JQuery的原理不懂，只是效果实现了，把我的思路写一下，第一次用博客园，不怎么会使，有错误请指正，谢谢

　　推荐阅读

　　基于jquery的商品展示放大镜

直接上代码吧（一共也才100来行，小东西）复制代码代码如下: $(document).ready(function() { _el("biggerPic").style.marginLeft = (0 - (getOffsetNumber(_el("biggerPic").style.width) - getOffsetNumber(_e>>>详细阅读

本文标题：基于JQuery的数字改变的动画效果--可用来做计数器

地址：http://www.17bianji.com/kaifa2/JS/25884.html

1/2 1