jQuery實(shí)現(xiàn)無限往下滾動(dòng)效果代碼
本文實(shí)例講述了jQuery實(shí)現(xiàn)無限往下滾動(dòng)效果的方法。分享給大家供大家參考,具體如下:
這是仿照騰訊的微薄上的一個(gè)效果。滾動(dòng)條可以無限的網(wǎng)下滾動(dò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的時(shí)候把isOK設(shè)置成false防止第一次沒有執(zhí)行完的情況下執(zhí)行第二次易出錯(cuò)
$("#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){
//當(dāng)前位置比上次的小就是往上滾動(dòng)不要執(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ā)生了錯(cuò)誤:'+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擴(kuò)展技巧總結(jié)》、《jQuery常見經(jīng)典特效匯總》、《jQuery動(dòng)畫與特效用法總結(jié)》、《jquery選擇器用法總結(jié)》及《jQuery常用插件及用法總結(jié)》
希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。
- 基于jQuery的公告無限循環(huán)滾動(dòng)實(shí)現(xiàn)代碼
- jQuery插件實(shí)現(xiàn)文字無縫向上滾動(dòng)效果代碼
- jquery插件之文字間歇自動(dòng)向上滾動(dòng)效果代碼
- jquery實(shí)現(xiàn)圖片水平滾動(dòng)效果代碼分享
- jQuery插件scroll實(shí)現(xiàn)無縫滾動(dòng)效果
- jQuery模擬新浪微博首頁滾動(dòng)效果的方法
- jquery實(shí)現(xiàn)多行文字圖片滾動(dòng)效果示例代碼
- 一個(gè)jquery實(shí)現(xiàn)的不錯(cuò)的多行文字圖片滾動(dòng)效果
- 使用jquery animate創(chuàng)建平滑滾動(dòng)效果(可以是到頂部、到底部或指定地方)
- jquery實(shí)現(xiàn)的圖片點(diǎn)擊滾動(dòng)效果
- jquery xMarquee實(shí)現(xiàn)文字水平無縫滾動(dòng)效果
相關(guān)文章
jQuery插件EnPlaceholder實(shí)現(xiàn)輸入框提示文字
EnPlaceholder插件支持密碼框哦!實(shí)際對(duì)比同類的placeholder插件在ie等瀏覽器下效果要好很多!下面我們來具體探討下此插件的使用方法吧。2015-06-06
easyui 中的datagrid跨頁勾選問題的實(shí)現(xiàn)方法
很多朋友都遇到這樣的需求,easyui的datagrid分頁顯示數(shù)據(jù),如果有需求要求勾選多條數(shù)據(jù)且不再同一頁中,easyui會(huì)保存在其他頁選中的數(shù)據(jù)嗎?小編結(jié)合資料自己整理了一篇文章,需要的的朋友參考下吧2017-01-01
jquery實(shí)現(xiàn)鼠標(biāo)拖拽滑動(dòng)效果來選擇數(shù)字的方法
這篇文章主要介紹了jquery實(shí)現(xiàn)鼠標(biāo)拖拽滑動(dòng)效果來選擇數(shù)字的方法,涉及jQuery鼠標(biāo)事件的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-05-05
jQuery表單獲取和失去焦點(diǎn)輸入框提示效果的實(shí)例代碼
這篇文章介紹了jQuery表單獲取和失去焦點(diǎn)輸入框提示效果的實(shí)例代碼,有需要的朋友可以參考一下2013-08-08
jquery實(shí)現(xiàn)按Enter鍵觸發(fā)事件示例
按Enter鍵觸發(fā)事件比如提交等等,下面有個(gè)不錯(cuò)的示例,感興趣的朋友可以參考下2013-09-09
Jquery EasyUI中彈出確認(rèn)對(duì)話框以及加載效果示例代碼
本篇文章主要是對(duì)Jquery EasyUI中彈出確認(rèn)對(duì)話框以及加載效果的示例代碼進(jìn)行了介紹,需要的朋友可以過來參考下,希望對(duì)大家有所幫助2014-02-02

