
如果有用过微软的bing搜索图片的童鞋们应该知道,bing中的图片列表比其他搜索引擎来的好用的多,bing取消了分页,当你使用滚动条向下滚动的时候,会自动触发ajax,提取下一页的图片,非常的方便,有兴趣的朋友点此试下。
AjaxScroll就是模范bing做出了类似的效果,你可以控制是垂直滚动条触发ajax,还是水平滚动条触发ajax。
点此下载
请在服务器端运行demo。
示例地址:http://project.yctin.com/ajaxscroll/demo/demo.integrate.fullsize.html
简明使用教程:
创建过程非常简单,这里不累述,请看demo,重点说明下配置参数。
- $('#example_horizontal').ajaxScroll({
- horizontal: true,
- batchNum: 20,
- batchSize: 1,
- maxOffset: 300,
- updateBatch: updateHorizontal
- });
- horizontal: true,水平滚动条触发ajax
- batchNum: 20,相当于单页读取个数
- batchSize: 1,相当于页数
- maxOffset: 300,滚动条最大移动距离
- updateBatch 非常重要的参数,更新内容的回调函数
- scrollDelay: 600 滚动延迟
回调函数说明:
- function updateHorizontal($obj){
- $obj.load('hdata/' + $obj.attr('offset') + '.html', null, function(){
- $(this).find("img").fullsize();
- });
- }
当滚动条移动结束,会触发这个回调函数,这时候使用$.load()方法读取后台页面,demo使用了静态页面,实际应用的时候应该指向后台脚本,把’offset’属性,就是滚动距离作为参数传输出去。

这个确实做得挺好的..
用起来也不是很难 值得收藏
页面尺寸是亮点 赞一个