DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> JQuery特效代碼 >> 基於JQuery的數字改變的動畫效果--可用來做計數器
基於JQuery的數字改變的動畫效果--可用來做計數器
編輯: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的原理不懂,只是效果實現了,把我的思路寫一下,第一次用博客園,不怎麼會使,有錯誤請指正,謝謝
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved