×

免费资源 网站建设 Z-BlogPHP

给你的页面加入下拉加载效果

小虎 小虎 发表于2014-10-20 00:57:59 浏览3816 评论10

10人参与发表评论

基于zblog php进行修改,其他网站程序可以参考使用,其实就一个js特效,在页面载入到底部的时候对下一页的内容加载输出。

image

下拉加载效果图

先在网站头部引入以下js内容:

  // Infinite Ajax Scroll, a jQuery plugin 1.0.2(function(e){"use strict";Date.now=Date.now||function(){return+(new Date)},e.ias=function(t){function u(){var t;i.onChangePage(function(e,t,r){s&&s.setPage(e,r),n.onPageChange.call(this,e,r,t)});if(n.triggerPageThreshold>0)a();else if(e(n.next).attr("href")){var u=r.getCurrentScrollOffset(n.scrollContainer);E(function(){p(u)})}return s&&s.havePage()&&(l(),t=s.getPage(),r.forceScrollTop(function(){var n;t>1?(v(t),n=h(!0),e("html, body").scrollTop(n)):a()})),o}function a(){c(),n.scrollContainer.scroll(f)}function f(){var e,t;e=r.getCurrentScrollOffset(n.scrollContainer),t=h(),e>=t&&(m()>=n.triggerPageThreshold?(l(),E(function(){p(e)})):p(e))}function l(){n.scrollContainer.unbind("scroll",f)}function c(){e(n.pagination).hide()}function h(t){var r,i;return r=e(n.container).find(n.item).last(),r.size()===0?0:(i=r.offset().top+r.height(),t||(i+=n.thresholdMargin),i)}function p(t,r){var s;s=e(n.next).attr("href");if(!s)return n.noneleft&&e(n.container).find(n.item).last().after(n.noneleft),l();if(n.beforePageChange&&e.isFunction(n.beforePageChange)&&n.beforePageChange(t,s)===!1)return;i.pushPages(t,s),l(),y(),d(s,function(t,i){var o=n.onLoadItems.call(this,i),u;o!==!1&&(e(i).hide(),u=e(n.container).find(n.item).last(),u.after(i),e(i).fadeIn()),s=e(n.next,t).attr("href"),e(n.pagination).replaceWith(e(n.pagination,t)),b(),c(),s?a():l(),n.onRenderComplete.call(this,i),r&&r.call(this)})}function d(t,r,i){var s=[],o,u=Date.now(),a,f;i=i||n.loaderDelay,e.get(t,null,function(t){o=e(n.container,t).eq(0),0===o.length&&(o=e(t).filter(n.container).eq(0)),o&&o.find(n.item).each(function(){s.push(this)}),r&&(f=this,a=Date.now()-u,a0&&p(n,function(){l(),i.getCurPageNum(n)+10;n--)if(e>t[n][0])return n+1;return 1}function a(e){for(var n=t.length-1;n>=0;n--)if(e>t[n][0])return t[n];return null}var t=[[0,document.location.toString()]],n=function(){},r=1,i=new e.ias.util;s(),this.getCurPageNum=function(t){return t=t||i.getCurrentScrollOffset(e(window)),u(t)},this.onChangePage=function(e){n=e},this.pushPages=function(e,n){t.push([e,n])}},e.ias.history=function(){function n(){t=!!(window.history&&history.pushState&&history.replaceState),t=!1}var e=!1,t=!1;n(),this.setPage=function(e,t){this.updateState({page:e},"",t)},this.havePage=function(){return this.getState()!==!1},this.getPage=function(){var e;return this.havePage()?(e=this.getState(),e.page):1},this.getState=function(){var e,n,r;if(t){n=history.state;if(n&&n.ias)return n.ias}else{e=window.location.hash.substring(0,7)==="#/page/";if(e)return r=parseInt(window.location.hash.replace("#/page/",""),10),{page:r}}return!1},this.updateState=function(t,n,r){e?this.replaceState(t,n,r):this.pushState(t,n,r)},this.pushState=function(n,r,i){var s;t?history.pushState({ias:n},r,i):(s=n.page>0?"#/page/"+n.page:"",window.location.hash=s),e=!0},this.replaceState=function(e,n,r){t?history.replaceState({ias:e},n,r):this.pushState(e,n,r)}}})(jQuery);         // next page         $.ias({            thresholdMargin: -100,            triggerPageThreshold: 5,//载入5次后停止自动载入            history: false,            container : '#divMain',//内容区域            item: '.post',//循环体            pagination: '.pagebar',//分页条            next: '.next-page a',//下一页链接            loader: '

数据载入中...
',//载入过程中显示的内容            trigger: '下一页',//停止载入后显示的内容            onPageChange: function(pageNum, pageUrl, scrollOffset) {                window._gaq && window._gaq.push(['_trackPageview', jQuery('').attr('href',pageUrl)[0].pathname.replace(/^[^\/]/,'/')]);            }        });

将对应模板的pagebar.php修改为如下内容(如果没有pagebar.php,那么新建一个):

 {if $pagebar}{foreach $pagebar.buttons as $k=>$v}  {if $pagebar.PageNow==$k}  {$k}  {elseif $pagebar.PageNow+1==$k}下一页  {else}{$k}  {/if}{/foreach}{/if}

以上内容基于Z-BLOGPHP版本的 default主题进行修改,其他主题可以参考,效果见鸟儿博客首页。

本文作者:鸟儿博客


评论列表

访客
无忧网站目录 无忧网站目录2014-10-26 19:52:14 · 回复 无忧网站目录来访!zblogPHP还不是非常完善!
成都SEO 成都SEO2014-10-24 19:09:56 · 回复 这个就叫实时加载还是什么来着,感觉有好处也有坏处
蒋子杰 蒋子杰2014-10-22 22:13:51 · 回复 我用的引用代码而不是代码高亮,Z-Blog asp我不知道代码高亮怎么用。
起运堂开运貔貅 起运堂开运貔貅2014-10-22 22:08:16 · 回复 博主网站超赞
雨夜 雨夜2014-10-22 20:25:20 · 回复 代码排版内容有点溢出了。。
厦门微信营销 厦门微信营销2014-10-22 16:17:28 · 回复 博主都不解释下嘛,会有错的呀
蒋子杰 蒋子杰2014-10-22 01:28:13 · 回复 加载到后面会有下一页的
歌词搜索 歌词搜索2014-10-22 00:24:31 · 回复 容易造成一直加载的情况。
冠名权 冠名权2014-10-20 10:15:17 · 回复 有下拉也不见得是好网站啊,,,
小鱼网 小鱼网2014-10-20 08:14:10 · 回复 很有用处