jquery+php實現(xiàn)滾動的數(shù)字特效
有時我們需要動態(tài)的展示訪問次數(shù)、下載次數(shù)等效果，我們可以借助jQuery結合后臺php實現(xiàn)一個滾動的數(shù)字展示效果。
本文以實時獲取某產(chǎn)品的下載次數(shù)為場景，前臺定時執(zhí)行javascript獲取最新的下載次數(shù)，并滾動更新頁面上的下載次數(shù)。
HTML
我們首先載入jQuery庫文件和動畫背景插件：animateBackground-plugin.js。
<script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/animateBackground-plugin.js"></script>
然后我們在頁面適當?shù)奈恢弥屑尤胍故緮?shù)字滾動效果的html元素。
<div id="total"> 下載量：<span class="t_num"></span>次 </div>
jQuery
首先來寫一個函數(shù)show_num()，該函數(shù)用來實現(xiàn)動態(tài)滾動數(shù)字。我們將統(tǒng)計數(shù)字n進行拆分成一個個單獨的數(shù)字，這些數(shù)字用<i></i>包圍，通過調(diào)用插件backgroundPosition將圖片定位到對應的每個數(shù)字上。
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獲取后臺最新的下載次數(shù)。下面的代碼是一個常見的jQuery的ajax請求，通過post請求到data.php，data.php或獲取最新的下載次數(shù)，處理成功后則得到下載次數(shù)：data.count，然后調(diào)用show_num()實現(xiàn)數(shù)字滾動。
function getdata(){
$.ajax({
url: 'data.php',
type: 'POST',
dataType: "json",
cache: false,
timeout: 10000,
error: function(){},
success: function(data){
show_num(data.count);
}
});
}
最后，我們在頁面加載完后要初始化數(shù)據(jù)，然后每隔3秒鐘執(zhí)行一次ajax請求，更新下載次數(shù)：
$(function(){
getdata();
setInterval('getdata()', 3000);//每隔3秒執(zhí)行一次
});
類似可以在統(tǒng)計網(wǎng)站訪問量、統(tǒng)計影片播放次數(shù)、倒計時等方面得到應用，至于后臺data.php如何處理數(shù)據(jù)不在本文敘述范圍內(nèi)，有興趣的同學可以自己寫一個諸如計數(shù)器之類的后臺程序來返回data.count。
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助。
相關文章
這篇文章主要介紹了Jquery 在頁面加載后執(zhí)行的幾種方式,需要的朋友可以參考下2014-03-03
之前做項目的時候，一直都想著做一個上下滾動的公告欄，作為展示網(wǎng)站的最新公告信息，給用戶帶來極好的用戶體驗，下面小編通過實例代碼給大家分享基于jQuery實現(xiàn)上下滾動公告欄，感興趣的朋友一起看看吧2018-11-11
這篇文章主要介紹了jQuery中prevUntil()方法用法,實例分析了按條件查找匹配元素之前所有的同輩元素的使用技巧,需要的朋友可以參考下2015-01-01
這篇文章主要是對jquery中iframe的操作進行了詳細的分析介紹，需要的朋友可以過來參考下，希望對大家有所幫助2013-11-11
為了讓本地圖片、遠程圖片、過小的圖片都適應此插件，有很多細節(jié)問題要處理。2009-11-11
display:none和visible:hidden都能把網(wǎng)頁上某個元素隱藏起來，而jQuery的顯示和隱藏又有哪些方法，在本文將為大家詳細介紹下，感興趣的朋友不要錯過2013-10-10
jquery使用jquery.zclip插件復制對象的實例教程
這篇文章主要介紹了jquery使用jquery.zclip插件復制對象的實例教程，當然也可以復制輸入框input、textarea等內(nèi)容，下面看代碼2013-12-12
這篇文章主要介紹了jquery向上向下取整適合分頁查詢及四舍五入,需要的朋友可以參考下2014-09-09
Jquery圖片延遲加載插件jquery.lazyload.js的使用方法
這篇文章主要介紹了Jquery圖片延遲加載插件jquery.lazyload.js的使用方法,需要的朋友可以參考下2014-05-05
這篇文章主要介紹了jquery如何根據(jù)屬性和index來查找屬性值并操作,需要的朋友可以參考下2014-07-07