拉動滾動條加載數(shù)據(jù)的jquery代碼
更新時間：2012年05月03日 20:10:42 作者：
拉動滾動條加載數(shù)據(jù)的jquery代碼，需要的朋友可以參考下
復(fù)制代碼 代碼如下:
<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>
您可能感興趣的文章:
- jquery實現(xiàn)表格無縫滾動
- Jquery原生態(tài)實現(xiàn)表格header頭隨滾動條滾動而滾動
- asp.net+jquery滾動滾動條加載數(shù)據(jù)的下拉控件
- jquery滾動組件(vticker.js)實現(xiàn)頁面動態(tài)數(shù)據(jù)的滾動效果
- 基于jquery實現(xiàn)頁面滾動到底自動加載數(shù)據(jù)的功能
- js/jquery控制頁面動態(tài)加載數(shù)據(jù) 滑動滾動條自動加載事件的方法
- jquery滾動加載數(shù)據(jù)的方法
- 使用jQuery或者原生js實現(xiàn)鼠標(biāo)滾動加載頁面新數(shù)據(jù)
- Jquery公告滾動+AJAX后臺得到數(shù)據(jù)
- jQuery實現(xiàn)表格行數(shù)據(jù)滾動效果
相關(guān)文章
JQuery點(diǎn)擊事件回到頁面頂部效果的實現(xiàn)代碼
下面小編就為大家?guī)硪黄狫Query點(diǎn)擊事件回到頁面頂部效果的實現(xiàn)代碼。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-05-05
基于jquery實現(xiàn)左右按鈕點(diǎn)擊的圖片切換效果
這篇文章主要介紹了基于jquery實現(xiàn)左右按鈕點(diǎn)擊的圖片切換效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2015-11-11
這篇文章主要介紹了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彈出層插件，點(diǎn)擊相冊的縮略圖，就會彈出該相片對應(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遍歷元素的技巧,非常具有實用價值,需要的朋友可以參考下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中把a(bǔ)jax封裝得非常好。但是日常開發(fā)中，我偶爾還是會遇到ajax報錯。本文進(jìn)行簡單分析一下ajax報錯。需要的朋友可以參考下2016-12-12