`
dcj3sjt126com
  • 浏览: 1882021 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

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

阅读更多

 

无限滚动自动翻页可以说是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的。

分享到:
评论

相关推荐

    js/jquery控制页面动态加载数据 滑动滚动条自动加载事件的方法

    页面滚动动态加载数据,页面下拉自动加载内容 相信很多人都见过瀑布流图片布局,那些图片是动态加载出来的,效果很好,对服务器的压力相对来说也小了很多 有手机的相信都见过这样的效果:进入qq空间,向下拉动空间,...

    页面滚动到底部自动加载数据

    页面滚动到底部自动加载数据,也被称为无限滚动或滚动加载,是现代网页设计中常见的一种交互方式。这种技术允许用户在浏览网页时无需点击分页按钮,只需将页面滚动到最底部,更多内容就会自动加载出来,提高了用户...

    jquery很炫的滚动条效果

    在实现滚动条效果时,我们可以利用jQuery提供的API来控制页面滚动,并添加动态效果。 1. **引入jQuery库**:在HTML文档中,我们需要引入jQuery库。通常,我们通过CDN(内容分发网络)链接来获取最新的jQuery版本,...

    基于jQuery实现滚动刷新效果

    实际情况使用Ajax获取后台数据更新前端页面即可实现页面滚动刷新效果 HTML正文: <form id="form1" runat="server"> </form> Javascript操作代码: $(document).ready(function() { $(window)....

    jquery滚动滚动条加载数据 类似瀑布流

    **jQuery滚动加载数据实现瀑布流布局** 在网页设计中,瀑布流(Masonry)布局是一种流行的方式,它能展示信息时让页面看起来更加美观且有层次感,类似于QQ空间动态加载数据的效果。当用户滚动页面时,内容会随着...

    jqueryDIV滚动条

    jquery滚动条jquery滚动条jquery滚动条jquery滚动条jquery滚动条jquery滚动条jquery滚动条jquery滚动条jquery滚动条jquery滚动条jquery滚动条jquery滚动条jsDIV滚动条jsDIV滚动条jsDIV滚动条

    Jquery实现手机端上拉滚动加载更多数据

    在移动设备上,为了优化用户体验,常常需要使用到“上拉滚动加载更多”功能,这在Jquery中可以通过实现特定的脚本逻辑来达成。这种技术通常被应用于新闻列表、商品展示等需要显示大量数据的场景,使得用户不必翻页,...

    jQuery全屏页面滚动效果页面上下滚动效果代码jq插件

    jQuery全屏页面滚动效果是一种常见的网页交互设计,它能够为用户带来流畅且富有动态感的浏览体验。在网页设计中,这种效果常用于创建引人入胜的单页应用(SPA)或者产品展示页面,使得内容随着用户的滚动动作自然...

    jquery修改滚动条样式

    3. `jQuery`应用:使用`jQuery`来改变滚动条样式,通常涉及到的是动态添加或修改CSS类。例如,当页面加载完成后,你可以使用以下代码应用自定义样式: ```javascript $(document).ready(function() { $('body')....

    ASP.NET+jquery实现AJAX滚动滚动条加载数据的下拉列表控件

    在本示例中,我们将讨论如何结合jQuery和AJAX技术,实现在ASP.NET环境中,当用户滚动滚动条时,下拉列表控件自动加载更多数据的功能。 jQuery是一个流行的JavaScript库,它简化了DOM操作、事件处理以及Ajax交互。在...

    jquery给表格加滚动条

    在网页设计中,当表格(Table)中的数据过多时,为保持页面的整洁与易读性,通常会采用滚动条来展示超出视口范围的内容。本示例将详细讲解如何利用jQuery库为普通的HTML表格添加滚动条,以实现数据的高效浏览。 一...

    jquery多款滚动条插件插件

    jQuery作为一款强大的JavaScript库,提供了许多优秀的滚动条插件,使得滚动条不仅具有基本的滚动功能,还能实现各种酷炫效果,如自定义样式、翻页效果、图片滚动等。本篇文章将详细介绍几款jQuery滚动条插件及其特色...

    华丽滚动条滚动条Jquery

    1. **Jquery选择器**:Jquery提供了丰富的选择器,如ID选择器、类选择器、属性选择器等,使我们能够精准地定位到页面上的滚动条元素,对其进行样式修改或添加动态效果。 2. **Jquery事件**:Jquery支持多种事件,如...

    jquery水平滚动条

    jQuery,一个广泛使用的JavaScript库,提供了丰富的功能和方法来定制和增强滚动条效果,使其更加美观且符合用户体验。本篇文章将深入探讨如何使用jQuery实现水平滚动条,并介绍相关的知识点。 首先,我们需要理解...

    jQuery美化滚动条

    jQuery.nicescroll是一款轻量级、高度可定制的滚动条插件,它允许开发者通过简单的API调用来实现滚动条的自定义样式和功能。该插件支持多种浏览器,包括Chrome、Firefox、Safari、Edge和IE8+,使得网页在各种环境下...

    jquery隐藏滚动条.zip

    "jQuery隐藏滚动条"就是一个这样的解决方案,它利用jQuery库和CSS3技术来实现滚动条的动态显示与隐藏,尤其适用于创建具有悬浮效果的滚动条。这个项目中的"jiaoben1813"可能是代码示例或教程的一部分。 首先,...

    jQuery懒加载插件页面滚动加载数据代码

    jQuery懒加载插件是一种优化网页性能的技术,它允许我们在用户滚动页面时按需加载内容,而不是一次性加载所有数据。这种技术对于拥有大量图片、视频或动态数据的网页尤其有用,因为它减少了初始页面加载时间,提高了...

    jQuery实现精美滚动条

    本篇文章将详细探讨如何使用jQuery来实现这样的精美滚动条。 首先,jQuery是一个广泛使用的JavaScript库,它简化了DOM操作、事件处理、动画效果以及Ajax交互。通过jQuery,我们可以轻松地对网页中的滚动条进行...

    jquery 滚动加载

    jQuery滚动加载,也被称为无限滚动或懒加载,是网页设计中一种常见的优化技术。它允许网页在用户滚动页面到底部时动态加载更多内容,而无需手动点击“加载更多”按钮或者刷新整个页面。这种技术在新闻网站、社交媒体...

    利用div+jquery自定义滚动条

    安装此插件后,我们可以在页面加载完成后调用它,并配置所需的样式和效果。例如: ```javascript $(document).ready(function() { $('.scroll-container').mCustomScrollbar({ axis: 'xy', // 指定滚动条的轴,'x...

Global site tag (gtag.js) - Google Analytics