首页 > 淘插件 > 综合功能 > (瀑布流)infinite-scroll-jquery滚动条(下拉)加载数据插件下载
(瀑布流)infinite-scroll-jquery滚动条(下拉)加载数据插件下载
授权形式: 免费版
更新时间: 2013-07-21 20:01:04
软件语言: 英文
软件平台: Win2000/WinXP/Win2003/win7,Linux
软件类别: 程序源码
文件大小: 未知
评论等级: ★★★★☆
浏览次数: (今日:,本周:,本月:
跳转地址: [跳到下载地址] 暂无预览
软件简介

(瀑布流)infinite-scroll-jquery滚动条(下拉)加载数据插件下载

infinite scroll 无限滚动插件

infinite scroll 无限滚动插件

Infinite  Scroll 翻译过来的意思是“无限滚动”。正是这样,只要你滚动鼠标滚轮,就不断有新的图片跳出来,你完全不必点翻页按钮。相信好多人都见识到过这种效果的魅力,比如bing,google的图片搜索。以及一些使用了瀑布流效果的 博客中。的确这种加载方式在增强了不小的用户体验。但是如何实现这种效果呢,说起来并不是很困难,如果你懂得js,如果你了解ajax,那么一切看起来那 么简单。如果你不是很了解上面那些,也不是什么难题,这里主要介绍一款jquery的插件来帮助你很轻松的实现这种效果。另外作者还在此插件基础上开发了 一个wordpress的插件,只要安装此wordpress插件,你就可以在你的博客上实现这种滚动条下拉加载的效果。

Infinite scroll 安装使用以及介绍:


第一步依旧同大部分jquery插件一样,载入jquery库文件,载入该插件的js文件。

该插件的配置信息:一般只用前三项

	$('#content').infinitescroll({
  navSelector  : "div.navigation", //导航的选择器,会被隐藏
  nextSelector : "div.navigation a:first",//包含下一页链接的选择器
  itemSelector : "#content div.post",//你将要取回的选项(内容块)
  debug        : true, //启用调试信息
  loadingImg   : "/img/loading.gif", //加载的时候显示的图片
                 //默认采用:"http://www.infinite-scroll.com/loading.gif"
  loadingText  : "我正在给力载入中...",//加载的时候显示的文字
                 // 默认显示: "<em>Loading the next set of posts...</em>"
  animate      : true, //当有新数据加载进来的时候,页面是否有动画效果,默认没有
  extraScrollPx: 50, //滚动条距离底部多少像素的时候开始加载,默认150
  donetext     : "客官已经结束了..." ,//数据加载完的时候显示的信息
                 // 默认显示: "<em>Congratulations, you've reached the end of the internet.</em>"
  bufferPx     : 40,//载入信息的显示时间,时间越大,载入信息显示时间越短
  errorCallback: function(){},//当出错的时候,比如404页面的时候执行的函数
  localMode    : true //是否允许载入具有相同函数的页面,默认为false
  },function(arrayOfNewElems){
  //程序执行完的回调函数
});

取消绑定事件的函数写法:

$(window).unbind('.infscr');
通过事件触发加载数据的写法:
$(document).trigger('retrieve.infscr'); //比如加到某个click事件中

高级进阶:
此插件还有一个鲜为人知的功能就是可以载入任何页面的选择器中的内容,可以是id以及是class,并转化到html存储。要比jquery自带的的load强大多了。

$('<div/>').load('/page/2/ #content div.post',function(){
    $(this).appendTo('#content');
});
官方信息:

WordPress 滚动条(下拉)加载插件:


插件介绍页面:http://www.infinite-scroll.com/installation/

插件下载地址:http://downloads.wordpress.org/plugin/infinite-scroll.zip  (右键另存为,或者复制到迅雷)

Infinite scroll 插件演示下载地址:


演示地址为作者地址:http://www.infinite-scroll.com/

插件下载地址: https://github.com/paulirish/infinite-scroll

其中包括两个案例,一个压缩版本和一个未压缩版本的js,以及wordpress 插件
 

------软件只供交流学习,权利归作者所有,如非免费产品请勿用于商业用途-------

下载地址
收藏
希望此广告对您有帮助->关于追太阳的广告
回到顶部