ajax異步請求獲取數據，實現滾動數字的效果。

BackgroundPositionAnimate.js下載

需要導入的js:

<script type="text/javascript" src="js/jquery.js"></script> 
<script type="text/javascript" src="js/BackgroundPositionAnimate.js"></script> 

展示數字滾動效果的html元素:

<div> 
   下載量：<span class="t_num"></span>次 
</div> 

 

通過異步請求獲取數據：

function getdata(){ 
    $.ajax({ 
        url: 'data.php', 
        type: 'POST', 
        dataType: "json", 
        cache: false, 
        timeout: 10000, 
        error: function(){}, 
        success: function(data){ 
            show_num(data.count); 
        } 
       }); 
} 

 

//表示查詢傳遞的數字
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(){} 
        ); 
    } 
} 

 設置定時：

$(function(){ 
    getdata(); 
    setInterval('getdata()', 3000);//每隔3秒執行一次 
});