欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

基于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自定義，代碼如下：
復(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)指正，謝謝

相關(guān)文章

最新評(píng)論