基于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的原理不懂,只是效果实现了,把我的思路写一下,第一次用博客园,不怎么会使,有错误请指正,谢谢

« 
» 
快速导航

Copyright © 2016 phpStudy | 豫ICP备2021030365号-3