jQuery實現(xiàn)無限往下滾動效果代碼
本文實例講述了jQuery實現(xiàn)無限往下滾動效果的方法。分享給大家供大家參考,具體如下:
這是仿照騰訊的微薄上的一個效果。滾動條可以無限的網(wǎng)下滾動并且無刷不斷從數(shù)據(jù)庫中獲取新的數(shù)據(jù)。
<style type="text/css"> body{ font-family: "Trebuchet MS",verdana,arial;} #loading{ display:none; font-weight:bold;color:#FF0000;} p { padding:10px;} </style> <p id="loading">loading data... </p> $(function(){ var isOK=true;//記錄上次訪問是否已經(jīng)結(jié)束,如果ajax也有線程就好了 var scrollH=0;//判斷是往上滾還是往下滾 var intI=1; // loading層是固定在頁腳的記錄牌 $(".loading").css({"right":"2","bottom":0}); $(".loading") .ajaxStart(function(){ isOK=false;//執(zhí)行ajax的時候把isOK設(shè)置成false防止第一次沒有執(zhí)行完的情況下執(zhí)行第二次易出錯 $("#loading2").show(); }) .ajaxStop(function(){ isOK=true; $("#loading2").hide(); }) $(window).scroll(function(){ //控制load層 document.getElementByIdx_x_x("loading").style.top=document.documentElement.scrollTop+"px"; //觸法ajax條件 可以換算成百分比更好 if($(document).height()-$(window).scrollTop()-document.documentElement.clientHeight<240){ //當前位置比上次的小就是往上滾動不要執(zhí)行ajax代碼塊 if(scrollH>document.documentElement.scrollTopY) { $(".loading").append("<br/>向上滾不執(zhí)行") scrollH=document.documentElement.scrollTop;//記錄新位置 return; } if(isOK)//如果是第一次或者上次執(zhí)行完成了就執(zhí)行本次 { scrollH=document.documentElement.scrollTop;//記錄新位置 $(".loading").append("<br/>~~<span style='background:#red'>執(zhí)行了ajax。。。。。</span><br/>") isOK=false; $.ajax({ type:"POST", dataType: 'xml', url:"http://localhost:49302/MY100/2010/WebService1.asmx/getDS", error:function(e){ $(".main").append('發(fā)生了錯誤:'+e) }, success:function(data){ try{ $(data).find("Table").each(function(i){ $(".main").append("結(jié)果:"+$(this).children('txtTitle').text()+"<br/>"); $(".main").append("結(jié)果:"+$(this).children('txtBody1').text()+"<br/>"); $(".main").append("結(jié)果:"+$(this).children('txtBody2').text()+"<br/>"); $(".main").append("結(jié)果:"+$(this).children('txtBody3').text()+"<br/>"); $(".main").append("結(jié)果:"+$(this).children('txtBody4').text()+"<br/>"); $(".main").append("結(jié)果:"+$(this).children('ID').text()+"<br/>"); })//each } catch(e){ $(".main").append("<p>"+e+"</p>") } }//success })//ajax }//if(isOK) else { $(".loading").append("<br/>~~你是向下滾了,但是上次還沒有執(zhí)行完畢,等等吧<br/>") } }// 觸法ajax條件 })//scroll })//Jquery 結(jié)束處
更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《jQuery切換特效與技巧總結(jié)》、《jQuery拖拽特效與技巧總結(jié)》、《jQuery擴展技巧總結(jié)》、《jQuery常見經(jīng)典特效匯總》、《jQuery動畫與特效用法總結(jié)》、《jquery選擇器用法總結(jié)》及《jQuery常用插件及用法總結(jié)》
希望本文所述對大家jQuery程序設(shè)計有所幫助。
- 基于jQuery的公告無限循環(huán)滾動實現(xiàn)代碼
- jQuery插件實現(xiàn)文字無縫向上滾動效果代碼
- jquery插件之文字間歇自動向上滾動效果代碼
- jquery實現(xiàn)圖片水平滾動效果代碼分享
- jQuery插件scroll實現(xiàn)無縫滾動效果
- jQuery模擬新浪微博首頁滾動效果的方法
- jquery實現(xiàn)多行文字圖片滾動效果示例代碼
- 一個jquery實現(xiàn)的不錯的多行文字圖片滾動效果
- 使用jquery animate創(chuàng)建平滑滾動效果(可以是到頂部、到底部或指定地方)
- jquery實現(xiàn)的圖片點擊滾動效果
- jquery xMarquee實現(xiàn)文字水平無縫滾動效果
相關(guān)文章
jQuery插件EnPlaceholder實現(xiàn)輸入框提示文字
EnPlaceholder插件支持密碼框哦!實際對比同類的placeholder插件在ie等瀏覽器下效果要好很多!下面我們來具體探討下此插件的使用方法吧。2015-06-06easyui 中的datagrid跨頁勾選問題的實現(xiàn)方法
很多朋友都遇到這樣的需求,easyui的datagrid分頁顯示數(shù)據(jù),如果有需求要求勾選多條數(shù)據(jù)且不再同一頁中,easyui會保存在其他頁選中的數(shù)據(jù)嗎?小編結(jié)合資料自己整理了一篇文章,需要的的朋友參考下吧2017-01-01jquery實現(xiàn)鼠標拖拽滑動效果來選擇數(shù)字的方法
這篇文章主要介紹了jquery實現(xiàn)鼠標拖拽滑動效果來選擇數(shù)字的方法,涉及jQuery鼠標事件的相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-05-05jquery實現(xiàn)按Enter鍵觸發(fā)事件示例
按Enter鍵觸發(fā)事件比如提交等等,下面有個不錯的示例,感興趣的朋友可以參考下2013-09-09Jquery EasyUI中彈出確認對話框以及加載效果示例代碼
本篇文章主要是對Jquery EasyUI中彈出確認對話框以及加載效果的示例代碼進行了介紹,需要的朋友可以過來參考下,希望對大家有所幫助2014-02-02