AjaxScroll — jquery滚动触发ajax的插件

发布于,归属于jquery插件2个座位已被强势霸占! 共有924人围观    

如果有用过微软的bing搜索图片的童鞋们应该知道,bing中的图片列表比其他搜索引擎来的好用的多,bing取消了分页,当你使用滚动条向下滚动的时候,会自动触发ajax,提取下一页的图片,非常的方便,有兴趣的朋友点此试下

AjaxScroll就是模范bing做出了类似的效果,你可以控制是垂直滚动条触发ajax,还是水平滚动条触发ajax。

点此下载
请在服务器端运行demo。

示例地址:http://project.yctin.com/ajaxscroll/demo/demo.integrate.fullsize.html

简明使用教程:

创建过程非常简单,这里不累述,请看demo,重点说明下配置参数。

  1. $('#example_horizontal').ajaxScroll({
  2.                     horizontal: true,
  3.                     batchNum: 20,
  4.                     batchSize: 1,
  5.                     maxOffset: 300,
  6.                     updateBatch: updateHorizontal
  7.                 });
  1. horizontal: true,水平滚动条触发ajax
  2. batchNum: 20,相当于单页读取个数
  3. batchSize: 1,相当于页数
  4. maxOffset: 300,滚动条最大移动距离
  5. updateBatch 非常重要的参数,更新内容的回调函数
  6. scrollDelay: 600 滚动延迟

回调函数说明:

  1. function updateHorizontal($obj){
  2.                 $obj.load('hdata/' + $obj.attr('offset') + '.html', null, function(){
  3.                     $(this).find("img").fullsize();
  4.                 });
  5.             }

当滚动条移动结束,会触发这个回调函数,这时候使用$.load()方法读取后台页面,demo使用了静态页面,实际应用的时候应该指向后台脚本,把’offset’属性,就是滚动距离作为参数传输出去。

(如果您喜欢这篇教程,可以通过支付宝打赏我们1元哦,拜谢!)

跟作者说两句

:wink: :twisted: :roll: :oops: :mrgreen: :lol: :idea: :evil: :cry: :arrow: :?: :-| :-x :-o :-P :-? :) :( :!: 8-O 8)

2个座位已被强势霸占!

  1. angel_night

    这个确实做得挺好的..

    用起来也不是很难 值得收藏

  2. mike

    页面尺寸是亮点 赞一个