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秒执行一次 
}); 
原文地址:https://www.cnblogs.com/wangkang0320/p/6796603.html