基于JQuery的數(shù)字改變的動(dòng)畫(huà)效果--可用來(lái)做計(jì)數(shù)器
更新時(shí)間：2010年08月11日 22:06:38 作者：
之前用javascript做個(gè)計(jì)數(shù)器，從網(wǎng)上搜了搜，找不到合適的，就想著用jquery自己做一個(gè)
因?yàn)橐笫莿?dòng)態(tài)的，我就想到了應(yīng)該是位置的變化，想到之前用過(guò)的JQuery，把里邊的效果全試了試，最后選用了animate自定義，代碼如下：
<html>
<head>
<title>testAnimate</title>
<script type="text/javascript">
function changeNum(n) { //n設(shè)為想要改成的數(shù)字
$(function () {
$("counter").animate({ top: '+=20px', opacity: '0' }, "slow", function () { //讓數(shù)字向下移動(dòng)并消失，top為元素距網(wǎng)頁(yè)頂部距離，opacity為透明度，值為0~1
document.getElementById("counter").innerHTML = n; //等數(shù)字消失后變?yōu)閚，網(wǎng)頁(yè)里有id為counter的一個(gè)span元素，這段代碼必須放在animate里邊，否則數(shù)字消失之前它的數(shù)值就改變了
})
.animate({ top: '-=40px' }, "slow") //數(shù)字n跳至原來(lái)位置的上方
.animate({ top: '+=20px', opacity: '1' }, "slow"); //數(shù)字n出現(xiàn)并落至數(shù)字原來(lái)位置，opacity為0時(shí)是對(duì)象完全透明，就是消失，值為1時(shí)是完全顯現(xiàn)
});
}
</script>
</head>
<body>
<span id="counter">1</span>
</body>
</html>
我只是新手，JQuery的原理不懂，只是效果實(shí)現(xiàn)了，把我的思路寫(xiě)一下，第一次用博客園，不怎么會(huì)使，有錯(cuò)誤請(qǐng)指正，謝謝
復(fù)制代碼 代碼如下:
<html>
<head>
<title>testAnimate</title>
<script type="text/javascript">
function changeNum(n) { //n設(shè)為想要改成的數(shù)字
$(function () {
$("counter").animate({ top: '+=20px', opacity: '0' }, "slow", function () { //讓數(shù)字向下移動(dòng)并消失，top為元素距網(wǎng)頁(yè)頂部距離，opacity為透明度，值為0~1
document.getElementById("counter").innerHTML = n; //等數(shù)字消失后變?yōu)閚，網(wǎng)頁(yè)里有id為counter的一個(gè)span元素，這段代碼必須放在animate里邊，否則數(shù)字消失之前它的數(shù)值就改變了
})
.animate({ top: '-=40px' }, "slow") //數(shù)字n跳至原來(lái)位置的上方
.animate({ top: '+=20px', opacity: '1' }, "slow"); //數(shù)字n出現(xiàn)并落至數(shù)字原來(lái)位置，opacity為0時(shí)是對(duì)象完全透明，就是消失，值為1時(shí)是完全顯現(xiàn)
});
}
</script>
</head>
<body>
<span id="counter">1</span>
</body>
</html>
我只是新手，JQuery的原理不懂，只是效果實(shí)現(xiàn)了，把我的思路寫(xiě)一下，第一次用博客園，不怎么會(huì)使，有錯(cuò)誤請(qǐng)指正，謝謝
您可能感興趣的文章:
- jQuery實(shí)現(xiàn)數(shù)字自動(dòng)增加或者減少的動(dòng)畫(huà)效果示例
- 利用原生JS與jQuery實(shí)現(xiàn)數(shù)字線(xiàn)性變化的動(dòng)畫(huà)
- jQuery實(shí)現(xiàn)的點(diǎn)贊隨機(jī)數(shù)字顯示動(dòng)畫(huà)效果(附在線(xiàn)演示與demo源碼下載)
- CountUp.js數(shù)字滾動(dòng)插件使用方法詳解
- CountUp.js實(shí)現(xiàn)數(shù)字滾動(dòng)增值效果
- countUp.js實(shí)現(xiàn)數(shù)字動(dòng)態(tài)變化效果
- countup.js實(shí)現(xiàn)數(shù)字動(dòng)態(tài)疊加效果
- jquery輕量級(jí)數(shù)字動(dòng)畫(huà)插件countUp.js使用詳解
相關(guān)文章
![jQuery中[attribute=value]選擇器用法實(shí)例](http://img.jbzj.com/images/xgimg/bcimg0.png)
jQuery中[attribute=value]選擇器用法實(shí)例
這篇文章主要介紹了jQuery中[attribute=value]選擇器用法,實(shí)例分析了[attribute=value]選擇器的功能、定義及給定屬性及屬性值元素的使用技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2014-12-12
Jquery實(shí)現(xiàn)簡(jiǎn)單圖片切換效果代碼，需要的朋友可以參考下。2011-01-01
jquery URL判斷，確定菜單樣式,需要的朋友可以參考下，當(dāng)然js也可以的。可以參考下相關(guān)文章。2010-05-05
第一次認(rèn)識(shí)jquery延遲對(duì)象，這篇文章主要為大家詳細(xì)解析JQ延遲對(duì)象的相關(guān)概念,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-10-10
這篇文章主要介紹了jQuery表單驗(yàn)證功能,涉及jquery針對(duì)表單項(xiàng)的讀取與正則判定技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-08-08
簡(jiǎn)單實(shí)現(xiàn)jQuery級(jí)聯(lián)菜單
這篇文章主要為大家詳細(xì)介紹了如何簡(jiǎn)單實(shí)現(xiàn)jQuery級(jí)聯(lián)菜單，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-01-01
JQuery在循環(huán)中綁定事件的問(wèn)題詳解
下面小編就為大家?guī)?lái)一篇JQuery在循環(huán)中綁定事件的問(wèn)題詳解。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-06-06
js實(shí)現(xiàn)的黑背景灰色二級(jí)導(dǎo)航菜單效果代碼
這篇文章主要介紹了js實(shí)現(xiàn)的黑背景灰色二級(jí)導(dǎo)航菜單效果代碼,涉及javascript操作頁(yè)面元素動(dòng)態(tài)切換的實(shí)現(xiàn)技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-08-08
jquery中關(guān)于inArray()函數(shù)的詳細(xì)使用說(shuō)明2011-10-10
jQuery實(shí)現(xiàn)的原圖對(duì)比窗簾效果
這篇文章主要介紹了jQuery實(shí)現(xiàn)的原圖對(duì)比窗簾效果,需要的朋友可以參考下2014-06-06