jQuery實(shí)現(xiàn)滾動(dòng)到底部時(shí)自動(dòng)加載更多的方法示例
本文實(shí)例講述了jQuery實(shí)現(xiàn)滾動(dòng)到底部時(shí)自動(dòng)加載更多的方法。分享給大家供大家參考,具體如下:
這里利用AJAX,實(shí)現(xiàn)滾動(dòng)到底加載數(shù)據(jù)功能:
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script src="js/jquery.min.js"></script> <script type="text/javascript"> $(function () { AddSth(); }); $(function () { $(".main").unbind("scroll").bind("scroll", function (e) { var sum = this.scrollHeight; if (sum <= $(this).scrollTop() + $(this).height()) { AddSth(); } }); }); function AddSth() { $.ajax({ type: 'POST', url: "index.aspx/ReturnSth", dataType: "json", contentType: "application/json; charset=utf-8", //data: "", success: function (data) { json = $.parseJSON(data.d); for (var i in json) { var tbBody = "<ul><li>" + json[i].sth + "</li></ul>"; $(".main").append(tbBody); } $(".main").append("<hr />"); } }); } </script> </head> <body> <form id="form1" runat="server"> <div>下拉加載更多</div><br /> <div class="main" style="border: 1px solid red; height: 700px; overflow: auto;"></div> </form> </body> </html>
更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《jquery中Ajax用法總結(jié)》、《jQuery表格(table)操作技巧匯總》、《jQuery操作json數(shù)據(jù)技巧匯總》、《jQuery form操作技巧匯總》、《jQuery常用插件及用法總結(jié)》、《jQuery擴(kuò)展技巧總結(jié)》及《jquery選擇器用法總結(jié)》
希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。
相關(guān)文章
Jquery全選與反選點(diǎn)擊執(zhí)行一次的解決方案
在做項(xiàng)目時(shí)遇到一個(gè)bug,checkbox全選與反選功能,只能點(diǎn)擊一次,再點(diǎn)就不起作用了,為了解決此問(wèn)題,我查找了好多資料,下面把具體解決方案整理分享給大家,需要的朋友可以參考下2015-08-08jQuery實(shí)現(xiàn)仿新浪微博浮動(dòng)的消息提示框(可智能定位)
這篇文章主要介紹了jQuery實(shí)現(xiàn)仿新浪微博浮動(dòng)的消息提示框,具有智能定位功能,涉及jQuery控制頁(yè)面元素浮動(dòng)效果的實(shí)現(xiàn)技巧,需要的朋友可以參考下2015-10-10jquery配合css簡(jiǎn)單實(shí)現(xiàn)返回頂部效果
返回頂部效果想必大家并不陌生吧,其實(shí)實(shí)現(xiàn)方法有很多,在本文為大家介紹下使用jquery是如何輕易實(shí)現(xiàn)的,感興趣的朋友可以參考下2013-09-09jQuery拖動(dòng)布局其結(jié)果保存到數(shù)據(jù)庫(kù)
這篇文章介紹了jQuery實(shí)現(xiàn)拖動(dòng)布局并將排序結(jié)果保存到數(shù)據(jù)庫(kù)的實(shí)現(xiàn)方法,感興趣的朋友可以參考一下2015-10-10jquery判斷類型是不是number類型的實(shí)例代碼
下面小編就為大家?guī)?lái)一篇jquery判斷類型是不是number類型的實(shí)例代碼。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-10-10jquery animate動(dòng)畫(huà)持續(xù)運(yùn)動(dòng)的實(shí)例
下面小編就為大家分享一篇jquery animate動(dòng)畫(huà)持續(xù)運(yùn)動(dòng)的實(shí)例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2017-11-11使用jQuery實(shí)現(xiàn)圖片遮罩半透明墜落遮擋
這篇文章主要介紹了使用jQuery實(shí)現(xiàn)圖片遮罩半透明墜落遮擋,效果非常棒,小伙伴們做相冊(cè)的時(shí)候可以直接拿走使用。2015-03-03