jQuery實現(xiàn)無限往下滾動效果代碼
本文實例講述了jQuery實現(xiàn)無限往下滾動效果的方法。分享給大家供大家參考,具體如下:
這是仿照騰訊的微薄上的一個效果。滾動條可以無限的網下滾動并且無刷不斷從數(shù)據庫中獲取新的數(shù)據。
<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;//記錄上次訪問是否已經結束,如果ajax也有線程就好了
var scrollH=0;//判斷是往上滾還是往下滾
var intI=1;
// loading層是固定在頁腳的記錄牌
$(".loading").css({"right":"2","bottom":0});
$(".loading")
.ajaxStart(function(){
isOK=false;//執(zhí)行ajax的時候把isOK設置成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("結果:"+$(this).children('txtTitle').text()+"<br/>");
$(".main").append("結果:"+$(this).children('txtBody1').text()+"<br/>");
$(".main").append("結果:"+$(this).children('txtBody2').text()+"<br/>");
$(".main").append("結果:"+$(this).children('txtBody3').text()+"<br/>");
$(".main").append("結果:"+$(this).children('txtBody4').text()+"<br/>");
$(".main").append("結果:"+$(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 結束處
更多關于jQuery相關內容感興趣的讀者可查看本站專題:《jQuery切換特效與技巧總結》、《jQuery拖拽特效與技巧總結》、《jQuery擴展技巧總結》、《jQuery常見經典特效匯總》、《jQuery動畫與特效用法總結》、《jquery選擇器用法總結》及《jQuery常用插件及用法總結》
希望本文所述對大家jQuery程序設計有所幫助。
- 基于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)文字水平無縫滾動效果
相關文章
jQuery插件EnPlaceholder實現(xiàn)輸入框提示文字
EnPlaceholder插件支持密碼框哦!實際對比同類的placeholder插件在ie等瀏覽器下效果要好很多!下面我們來具體探討下此插件的使用方法吧。2015-06-06
easyui 中的datagrid跨頁勾選問題的實現(xiàn)方法
很多朋友都遇到這樣的需求,easyui的datagrid分頁顯示數(shù)據,如果有需求要求勾選多條數(shù)據且不再同一頁中,easyui會保存在其他頁選中的數(shù)據嗎?小編結合資料自己整理了一篇文章,需要的的朋友參考下吧2017-01-01
jquery實現(xiàn)鼠標拖拽滑動效果來選擇數(shù)字的方法
這篇文章主要介紹了jquery實現(xiàn)鼠標拖拽滑動效果來選擇數(shù)字的方法,涉及jQuery鼠標事件的相關技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-05-05
jquery實現(xiàn)按Enter鍵觸發(fā)事件示例
按Enter鍵觸發(fā)事件比如提交等等,下面有個不錯的示例,感興趣的朋友可以參考下2013-09-09
Jquery EasyUI中彈出確認對話框以及加載效果示例代碼
本篇文章主要是對Jquery EasyUI中彈出確認對話框以及加載效果的示例代碼進行了介紹,需要的朋友可以過來參考下,希望對大家有所幫助2014-02-02

