拉動滾動條加載數(shù)據(jù)的jquery代碼

更新時間：2012年05月03日 20:10:42 作者：

拉動滾動條加載數(shù)據(jù)的jquery代碼，需要的朋友可以參考下

 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
<title>拉動滾動條加載數(shù)據(jù)</title> 
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script> 
<script type="text/javascript"> 
$(function () { 
var i = 4;$(window).bind("scroll", function (event) 
{ 
//滾動條到網(wǎng)頁頭部的 高度，兼容ie,ff,chrome 
var top = document.documentElement.scrollTop + document.body.scrollTop; 
//網(wǎng)頁的高度 
var textheight = $(document).height(); 
// 網(wǎng)頁高度-top-當(dāng)前窗口高度 
if (textheight - top - $(window).height() <= 100) { if (i >= 100) { return; 
//控制最大只能加載到100 
} 
$('#div1').css("height", $(document).height() + 100);i++; 
//可以根據(jù)實際情況，獲取動態(tài)數(shù)據(jù)加載 到 div1中 
$('<div>' + i + '</div>').appendTo($('#div1')); 
} 
}); 
}) 
</script> 
<style> 
#div1 div 
{ 
font-size: 100px; 
background: #ccc; 
margin-top: 5px; 
} 
</style> 
</head> 
<body> 
<form id="form1" runat="server"> 
<div style="height: 1000px;" id="div1"> 
<div> 
</div> 
<div> 
</div> 
<div> 
</div> 
<div> 
</div> 
</div> 
</form> 
</body> 
</html> 

您可能感興趣的文章:

相關(guān)文章

JQuery點擊事件回到頁面頂部效果的實現(xiàn)代碼
下面小編就為大家?guī)硪黄狫Query點擊事件回到頁面頂部效果的實現(xiàn)代碼。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-05-05
基于jquery實現(xiàn)左右按鈕點擊的圖片切換效果
這篇文章主要介紹了基于jquery實現(xiàn)左右按鈕點擊的圖片切換效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2015-11-11
jQuery實現(xiàn)返回頂部效果的方法
這篇文章主要介紹了jQuery實現(xiàn)返回頂部效果的方法,涉及jQuery頁面樣式、鼠標(biāo)事件及頁面元素的相關(guān)操作技巧,需要的朋友可以參考下
2015-05-05
Jquery實現(xiàn)帶動畫效果的經(jīng)典二級導(dǎo)航菜單
導(dǎo)航菜單在網(wǎng)頁中呈現(xiàn)的頻率還是比較多的，因為效果相當(dāng)不錯,接下來為大家介紹下使用jquery實現(xiàn)經(jīng)典二級導(dǎo)航菜單，各位童鞋們快來圍觀哦
2013-03-03
jQuery插件zoom實現(xiàn)圖片全屏放大彈出層特效
jQuery zoom是一款能夠查看相冊大圖的jQuery彈出層插件，點擊相冊的縮略圖，就會彈出該相片對應(yīng)的大圖，并且?guī)в袀€性的加載動畫，還有上一張下一張按鈕以及關(guān)閉按鈕。使用方法非常簡單。兼容IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗等瀏覽器。
2015-04-04
jQuery.extend()、jQuery.fn.extend()擴(kuò)展方法示例詳解
這篇文章主要介紹了jQuery.extend()、jQuery.fn.extend()擴(kuò)展方法的應(yīng)用,需要的朋友可以參考下
2014-05-05
jQuery在ul中顯示某個li索引號的方法
這篇文章主要介紹了jQuery在ul中顯示某個li索引號的方法,涉及jQuery遍歷元素的技巧,非常具有實用價值,需要的朋友可以參考下
2015-03-03
jquery ajax結(jié)合thinkphp的getjson實現(xiàn)跨域的方法
這篇文章主要介紹了jquery ajax結(jié)合thinkphp的getjson實現(xiàn)跨域的方法,結(jié)合實例形式對比分析了jQuery ajax實現(xiàn)跨域的具體操作技巧,具有一定參考借鑒價值,需要的朋友可以參考下
2016-06-06
jQuery中校驗時間格式的正則表達(dá)式小結(jié)
下面我介紹兩種校驗時間格式的正則表達(dá)式實例了，這個其實可以直接叫js了，因為正則功能jquery與js是一樣的，下面看實例
2013-09-09
jQuery中ajax錯誤調(diào)試分析
jQuery中把a(bǔ)jax封裝得非常好。但是日常開發(fā)中，我偶爾還是會遇到ajax報錯。本文進(jìn)行簡單分析一下ajax報錯。需要的朋友可以參考下
2016-12-12