jquery 写个滚动自动加载插件

分享给大家：

应用 1.  jquery 包 

          2. template.js 包

     

$(function(b) {

    b.fn.scrollAjax = function(d) {         var a = b(this);         d = b.extend({}, {             tpl: ".tpl",             url: "http://www.yipanwang.com",             type: "get",             page: 0         }, d);         a.options = d;         a.options.rpage = 0;         a.options.pageCount = 0;         a.loadHtml = "";         a.loadClass = "";         a.loadTop = !1;         a.isScrollBool = !0;         a.setIsScrollBool = function(b) {             a.isScrollBool = b         };         a.ajax = function() {             var c, d = template(b(a.options.tpl).html());             b.ajax({                 url: a.options.url,                 type: a.options.type,                 data: {                     p: a.options.page                 },                 async: !1,                 contentType: "json",                 dataType: "json",                 success: function(b) {                     a.options.rpage = b.page;                     a.options.pageCount = b.pageCount;                     c = d(b);                     console.log(c);                     console.log(a.options.tpl);                     a.html(c);                     a.hideLoading()                 },                 error: function() {                     console.log("error");                     a.hideLoading()                 }             })         };         a.headerLoading = function() {             a.loadHtml = "<div class='headerloading'>上加载...</div>";             b("body").append(a.loadHtml);             b(".headerloading").css({                 position: "absolute",                 width: b(window).width(),                 height: 10,                 top: b(document).scrollTop() + 50,                 left: 0,                 "text-align": "center"             });             a.loadClass = ".headerloading"         };         a.footerLoading = function() {             a.loadHtml = "<div class='footerloading'>下加载...</div>";             b("body").append(a.loadHtml);             b(".footerloading").css({                 position: "absolute",                 width: b(window).width(),                 height: 10,                 top: b(window).height() + parseFloat(b(document).scrollTop()) - 100,                 left: 0,                 "text-align": "center"             });             a.loadClass = ".footerloading"         };         a.centerLoading = function() {             a.loadHtml = "<div class='centerloading'>加载中...</div>";             b("body").append(a.loadHtml);             b(".centerloading").css({                 position: "absolute",                 width: b(window).width(),                 height: 10,                 top: b(window).height() + parseFloat(b(document).scrollTop()) - b(window).height() / 2 + 20,                 left: b(window).width() / 2 - 20,                 "text-align": "center"             });             a.loadClass = ".centerloading"         };         a.hideLoading = function() {             "" != a.loadHtml && (b(a.loadClass).remove(), a.loadHtml = "")         };         a.setTimeOutScrollTop = function() {             if (10 > parseFloat(b(document).scrollTop())) {                 if (0 < a.options.rpage) return a.options.page = a.options.rpage - 1, a.headerLoading(), b(document).scrollTop(12), !0;                 b(document).scrollTop(0)             }             return !1         };         a.scrollWindows = function() {             var c = !1;             1 == a.setTimeOutScrollTop() && (c = !0);             console.log("top:" + b(document).scrollTop());             parseFloat(b(window).height()) + parseFloat(b(document).scrollTop()) >= b(document).height() && a.options.rpage < a.options.pageCount && (a.options.page = a.options.rpage + 1, c = !0, a.footerLoading());             1 == c ? a.ajax() : a.hideLoading()         };         a.init = function() {             a.centerLoading();             a.ajax();             b(window).scroll(function() {                 1 == a.isScrollBool && a.scrollWindows()             })         };         a.init();         return {             setIsScrollBool: a.setIsScrollBool         }     }

});

下面是写的应用步骤

<div class="am-list-news-bd am-list-news-default"> <!--物业沟通列表--> <ul class="am-list"> <!--不带标题图--> 请稍等... <!--不带标题图--> </ul> <script id="tpl" type="text/html"> <%for(i=0;i<list.length;i++){%> <li class="am-g am-list-item-desced"> <div class=" am-list-main"> <h3 class="am-list-item-hd"><a href="http://www.yipanwang.com/<%=list[i].url%>" class=""><%=list[i].c_title%></a></h3> <div class="am-list-item-text"><%=getLocalTime(list[i].c_time)%></div> </div> </li> <%}%> </script> </div> <script> $(document).ready(function(){ var obj=$(".am-list").scrollAjax({tpl:"#tpl",url:"{:U("Yeweihuicenter/ajaxchapter",array("village_id"=>$vo["village_id"],"n"=>$_GET["n"]))}",type:"get",page:0}); //obj.setIsScrollBool(false); }); </script>

大家有意向获取实例可以上“一盘网” 找联系我们的平台服务下的邮箱 发邮件给我。