拉動(dòng)滾動(dòng)條加載數(shù)據(jù)的jquery代碼
更新時(shí)間：2012年05月03日 20:10:42 作者：
拉動(dòng)滾動(dòng)條加載數(shù)據(jù)的jquery代碼，需要的朋友可以參考下
復(fù)制代碼 代碼如下:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>拉動(dòng)滾動(dòng)條加載數(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)
{
//滾動(dòng)條到網(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ù)實(shí)際情況，獲取動(dòng)態(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實(shí)現(xiàn)表格無縫滾動(dòng)
- Jquery原生態(tài)實(shí)現(xiàn)表格header頭隨滾動(dòng)條滾動(dòng)而滾動(dòng)
- asp.net+jquery滾動(dòng)滾動(dòng)條加載數(shù)據(jù)的下拉控件
- jquery滾動(dòng)組件(vticker.js)實(shí)現(xiàn)頁面動(dòng)態(tài)數(shù)據(jù)的滾動(dòng)效果
- 基于jquery實(shí)現(xiàn)頁面滾動(dòng)到底自動(dòng)加載數(shù)據(jù)的功能
- js/jquery控制頁面動(dòng)態(tài)加載數(shù)據(jù) 滑動(dòng)滾動(dòng)條自動(dòng)加載事件的方法
- jquery滾動(dòng)加載數(shù)據(jù)的方法
- 使用jQuery或者原生js實(shí)現(xiàn)鼠標(biāo)滾動(dòng)加載頁面新數(shù)據(jù)
- Jquery公告滾動(dòng)+AJAX后臺(tái)得到數(shù)據(jù)
- jQuery實(shí)現(xiàn)表格行數(shù)據(jù)滾動(dòng)效果
相關(guān)文章
JQuery點(diǎn)擊事件回到頁面頂部效果的實(shí)現(xiàn)代碼
下面小編就為大家?guī)硪黄狫Query點(diǎn)擊事件回到頁面頂部效果的實(shí)現(xiàn)代碼。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-05-05
基于jquery實(shí)現(xiàn)左右按鈕點(diǎn)擊的圖片切換效果
這篇文章主要介紹了基于jquery實(shí)現(xiàn)左右按鈕點(diǎn)擊的圖片切換效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2015-11-11
這篇文章主要介紹了jQuery實(shí)現(xiàn)返回頂部效果的方法,涉及jQuery頁面樣式、鼠標(biāo)事件及頁面元素的相關(guān)操作技巧,需要的朋友可以參考下2015-05-05
Jquery實(shí)現(xiàn)帶動(dòng)畫效果的經(jīng)典二級(jí)導(dǎo)航菜單
導(dǎo)航菜單在網(wǎng)頁中呈現(xiàn)的頻率還是比較多的，因?yàn)樾Ч喈?dāng)不錯(cuò),接下來為大家介紹下使用jquery實(shí)現(xiàn)經(jīng)典二級(jí)導(dǎo)航菜單，各位童鞋們快來圍觀哦2013-03-03
jQuery插件zoom實(shí)現(xiàn)圖片全屏放大彈出層特效
jQuery zoom是一款能夠查看相冊(cè)大圖的jQuery彈出層插件，點(diǎn)擊相冊(cè)的縮略圖，就會(huì)彈出該相片對(duì)應(yīng)的大圖，并且?guī)в袀€(gè)性的加載動(dòng)畫，還有上一張下一張按鈕以及關(guān)閉按鈕。使用方法非常簡(jiǎ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中顯示某個(gè)li索引號(hào)的方法
這篇文章主要介紹了jQuery在ul中顯示某個(gè)li索引號(hào)的方法,涉及jQuery遍歷元素的技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-03-03
jquery ajax結(jié)合thinkphp的getjson實(shí)現(xiàn)跨域的方法
這篇文章主要介紹了jquery ajax結(jié)合thinkphp的getjson實(shí)現(xiàn)跨域的方法,結(jié)合實(shí)例形式對(duì)比分析了jQuery ajax實(shí)現(xiàn)跨域的具體操作技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2016-06-06
jQuery中校驗(yàn)時(shí)間格式的正則表達(dá)式小結(jié)
下面我介紹兩種校驗(yàn)時(shí)間格式的正則表達(dá)式實(shí)例了，這個(gè)其實(shí)可以直接叫js了，因?yàn)檎齽t功能jquery與js是一樣的，下面看實(shí)例2013-09-09
jQuery中把a(bǔ)jax封裝得非常好。但是日常開發(fā)中，我偶爾還是會(huì)遇到ajax報(bào)錯(cuò)。本文進(jìn)行簡(jiǎn)單分析一下ajax報(bào)錯(cuò)。需要的朋友可以參考下2016-12-12