jQuery數字滾動展示效果
阿新 • • 發佈:2019-02-05
地址: http://www.helloweba.com/view-blog-217.html
HTML
我們首先載入jQuery庫檔案和動畫背景外掛:animateBackground-plugin.js。
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/animateBackground-plugin.js"></script>
然後我們在頁面適當的位置中加入要展示數字滾動效果的html元素。
<div id="total">
下載量:<span class="t_num"></span>次
</div>
jQuery
首先來寫一個函式show_num(),該函式用來實現動態滾動數字。我們將統計數字n進行拆分成一個個單獨的數字,這些數字用<i></i>包圍,通過呼叫外掛backgroundPosition將圖片定位到對應的每個數字上。
function show_num(n){
var it = $(".t_num i");
var len = String(n).length;
for(var i=0;i<len;i++){
if(it.length<=i){
$(".t_num").append("<i></i>");
}
var num=String(n).charAt(i);
var y = -parseInt(num)*30; //y軸位置
var obj = $(".t_num i").eq(i);
obj.animate({ //滾動動畫
backgroundPosition :'(0 '+String(y)+'px)'
}, 'slow','swing',function(){}
);
}
}
接著,我們通過ajax獲取後臺最新的下載次數。下面的程式碼是一個常見的jQuery的ajax請求,通過post請求到data.php,data.php或獲取最新的下載次數,處理成功後則得到下載次數:data.count,然後呼叫show_num()實現數字滾動。
function getdata(){
$.ajax({
url: 'data.php',
type: 'POST',
dataType: "json",
cache: false,
timeout: 10000,
error: function(){},
success: function(data){
show_num(data.count);
}
});
}
最後,我們在頁面載入完後要初始化資料,然後每隔3秒鐘執行一次ajax請求,更新下載次數:
$(function(){
getdata();
setInterval('getdata()', 3000);//每隔3秒執行一次
});
類似可以在統計網站訪問量、統計影片播放次數、倒計時等方面得到應用,至於後臺data.php如何處理資料不在本文敘述範圍內,有興趣的同學可以自己寫一個諸如計數器之類的後臺程式來返回data.count。