jQuery實現(xiàn)模仿微博下拉滾動條加載數(shù)據(jù)效果
更新時間:2015年12月25日 09:56:08 作者:cui_angel
這篇文章主要介紹了jQuery實現(xiàn)模仿微博下拉滾動條加載數(shù)據(jù)效果,涉及jQuery響應下拉滾動事件動態(tài)操作頁面元素的技巧,需要的朋友可以參考下
本文實例講述了jQuery實現(xiàn)模仿微博下拉滾動條加載數(shù)據(jù)效果。分享給大家供大家參考,具體如下:
<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>滾動條距離底部</title> <script src="jquery-1.6.2.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-當前窗口高度 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> 1</div> <div> 2</div> <div> 3</div> <div> 4</div> </div> </form> </body> </html>
希望本文所述對大家jQuery程序設計有所幫助。
您可能感興趣的文章:
- asp.net+jquery滾動滾動條加載數(shù)據(jù)的下拉控件
- js/jquery控制頁面動態(tài)加載數(shù)據(jù) 滑動滾動條自動加載事件的方法
- 拉動滾動條加載數(shù)據(jù)的jquery代碼
- asp.net網(wǎng)站開發(fā)中用jquery實現(xiàn)滾動瀏覽器滾動條加載數(shù)據(jù)(類似于騰訊微博)
- 基于jquery實現(xiàn)頁面滾動到底自動加載數(shù)據(jù)的功能
- jQuery結(jié)合AJAX之在頁面滾動時從服務器加載數(shù)據(jù)
- jquery滾動加載數(shù)據(jù)的方法
- jQuery實現(xiàn)當拉動滾動條到底部加載數(shù)據(jù)的方法分析
相關(guān)文章
jQuery實現(xiàn)的產(chǎn)品自動360度旋轉(zhuǎn)展示特效源碼分享
這篇文章主要展示了jQuery實現(xiàn)的產(chǎn)品自動360度旋轉(zhuǎn)展示特效,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2015-08-08jQuery Mobile開發(fā)中日期插件Mobiscroll使用說明
這篇文章主要介紹了jQuery Mobile開發(fā)中日期插件Mobiscroll使用說明,需要的朋友可以參考下2016-03-03jQuery使用zTree插件實現(xiàn)樹形菜單和異步加載
這篇文章主要介紹了jQuery使用zTree插件實現(xiàn)樹形菜單和異步加載的相關(guān)方法,感興趣的小伙伴們可以參考一下2016-02-02jQuery中調(diào)用WebService方法小結(jié)
以前在寫ajax請求時,總是喜歡使用jQuery+ashx的方式進行調(diào)用,今天采取jQuery+WebService的方法來做ajax請求,發(fā)現(xiàn)這種方式比使用ashx的方式要更方便。2011-03-03