新浪微博网页自动底部加载的效果很酷吧?其实这种叫做“无限滚动的翻页技术”,当你页面滑到列表底部时候无需点击就自动加载更多的内容。
其实有很多jQuery的插件都已经实现了这个效果,我们来介绍几个吧!
1、jQuery ScrollPagination
jQuery ScrollPagination plugin 是一个jQuery 实现的支持无限滚动加载数据的插件。
地址:
他的demo下载:
实例代码:
$(function(){$('#content').scrollPagination({'contentPage': 'democontent.html', // the url you are fetching the results'contentData': {}, // these are the variables you can pass to the request, for example: children().size() to know which page you are'scrollTarget': $(window), // who gonna scroll? in this example, the full window'heightOffset': 10, // it gonna request when scroll is 10 pixels before the page ends'beforeLoad': function(){ // before load function, you can display a preloader div$('#loading').fadeIn();},'afterLoad': function(elementsLoaded){ // after loading content, you can use this function to animate your new elements$('#loading').fadeOut();var i = 0;$(elementsLoaded).fadeInWithDelay();if ($('#content').children().size() > 100){ // if more than 100 results already loaded, then stop pagination (only for testing)$('#nomoreresults').fadeIn();$('#content').stopScrollPagination();}}});// code for fade in element by element$.fn.fadeInWithDelay = function(){var delay = 0;return this.each(function(){$(this).delay(delay).animate({opacity:1}, 200);delay += 100;});};});
2、 jQuery Screw
Screw (scroll + view) 是一个 jQuery 插件当用户滚动页面的时候加载内容,是一个无限滚动翻页的插件。
官方地址:
3. AutoBrowse jQuery Plugin
Autobrowse jQuery Plugin 插件在用户滚动页面的时候自动通过 Ajax 加载更多内容,使用浏览器内置缓存。
官方地址:
文章转自 (http://www.makeyuan.com)-关注码农创业,着力打造IT技术分享和信息传播平台