当前位置:首页 > 开发 > 编程语言 > 编程 > 正文

10款用 jquery 实现滚动条至页面底端自动加载数据效果

发表于: 2012-12-23   作者:dcj3sjt126com   来源:转载   浏览:
摘要:   无限滚动自动翻页可以说是web2.0时代的一项堪称伟大的技术,它让我们在浏览页面的时候只需要把滚动条拉到网页底部就能自动显示下一页的结果,改变了一直以来只能通过点击下一页来翻页这种常规做法。 无限滚动自动翻页技术的鼻祖是微博的先驱:推特(twitter),后来必应图片搜索、谷歌图片搜索、google reader、箱包批发网等纷纷抄袭了这一项技术,于是靠滚动浏览器滚动条

 

无限滚动自动翻页可以说是web2.0时代的一项堪称伟大的技术,它让我们在浏览页面的时候只需要把滚动条拉到网页底部就能自动显示下一页的结果,改变了一直以来只能通过点击下一页来翻页这种常规做法。

无限滚动自动翻页技术的鼻祖是微博的先驱:推特(twitter),后来必应图片搜索、谷歌图片搜索、google reader、箱包批发网等纷纷抄袭了这一项技术,于是靠滚动浏览器滚动条来翻页的技术慢慢在互联网上遍站开花。

要在自家的网站上实现自动翻页的功能并不复杂,twitter面向开发者提供了相关的api,而且已经有人开发了相关的jquery插件,让我们可以事半功倍,下面老k为你列举一下这些无限滚动jquery插件。

 

1、jquery ScrollPagination

这是一款由国外jquery爱好者出于学习目的开发的自动分页插件,你可以把它应用在任何地方。

2、Screw

可以实现当用户滚动网页时加载html,避免一次性加载一个大页面,这样可以减轻宽带的负担,加快访问速度。当然它也可以实现当用户滚动滚动条到网页底部的时候自动翻页。

3、Autobrowse

通过ajax实现当用户滚动时自动加载页面内容,同时可以把内容写入到到浏览器缓存。使用很简单,只需要在html容器(例如:div)中使用autobrowse属性就可以实现了。

4、Scroll Extend Plugin

设计用来自动加载页面底部以下的内容,是通过将内容appendTo来某个dom来实现的,当滚动超出这个dom后自动加载页面内容。作者的初衷是用来集成到wordpress的。

5、Infinite Scroll Plugin

也是一款不错的无限滚动jquery插件。效果和dzone的一样。

6、Endless Scroll jQuery Plugin

比较轻巧,完成任务10次的自动加载后自动停止滚动加载。

7、Load Content While Scrolling With jQuery

内容自动加载插件,有助于加快页面初始加载速度,用户将只加载他们所看到的内容。

8、Infinite Ajax Scroll

结合jquery的ease.实现的滚动无刷新自动分页。

9、Infinite Scrolling jQuery Plugin

尤其适用于博客文章的一款自动分页插件,像twitter、fackbook实现的那样。

10、Unlimited Scroll using the Twitter API

一款基于twitter的api实现的滚动分页jquery插件,正如本文开头说的那样,twitter提供了滚动浏览器滚动条到网页底部时自动分页的实现接口,而这款正是一个很好的实现例子。不过国内的用户建议不要使用,因为我们是访问不了twitter的。

10款用 jquery 实现滚动条至页面底端自动加载数据效果

  • 0

    开心

    开心

  • 0

    板砖

    板砖

  • 0

    感动

    感动

  • 0

    有用

    有用

  • 0

    疑问

    疑问

  • 0

    难过

    难过

  • 0

    无聊

    无聊

  • 0

    震惊

    震惊

编辑推荐
无刷新动态加载数据,滚动条加载 滚屏加载更多数据,适合评论等页面 本例的数据库很简单,一看就明了
先看看效果: 1 aspx: Code <%@ Page Language="C#" AutoEventWireup<span style="color: #00
简单代码: jsp中代码如下: <wbr> <div id="dataLoad" style="display:none"><!--页
1、jquery可拖动弹出层插件点击弹出层插件 jquery弹出层插件制作注册表单点击按钮弹出层表单提交效
说明: ViewPager用于实现多页面的切换效果,该类存在于Google的兼容包里面,所以在引用时记得在Bui
在线演示1 在线演示2 在线演示3 <li style="background-color: transparent; border: 0px; margi
转自 http://www.eoeandroid.com/forum.php?mod=viewthread&tid=76872 一、通过动画实现 定义res/an
欢迎加入Cocos2d-x 交流群:193411763 原码下载地址:http://download.csdn.net/detail/u012945598/
用tableView实现的一种加载数据的布局 此博文是应朋友之邀解决他的业务逻辑问题 效果: 素材: 源码:
1.jQuery二级下拉菜单 下拉箭头翻转动画 之前我们分享过不少基于jQuery的二级下拉菜单,甚至是多级
版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号