demo.html
<li style="opacity:0;-moz-opacity: 0;filter: alpha(opacity=0);"><p>---------------</p></li> <li style="opacity:0;-moz-opacity: 0;filter: alpha(opacity=0);"><p>阅谁问君诵,水落清香浮</p></li> <li style="opacity:0;-moz-opacity: 0;filter: alpha(opacity=0);"><p>阅谁问君诵,水落清香浮</p></li> <li style="opacity:0;-moz-opacity: 0;filter: alpha(opacity=0);"><p>阅谁问君诵,水落清香浮</p></li> <li style="opacity:0;-moz-opacity: 0;filter: alpha(opacity=0);"><p>阅谁问君诵,水落清香浮</p></li> <li style="opacity:0;-moz-opacity: 0;filter: alpha(opacity=0);"><p>阅谁问君诵,水落清香浮</p></li> <li style="opacity:0;-moz-opacity: 0;filter: alpha(opacity=0);"><p>阅谁问君诵,水落清香浮</p></li> <li style="opacity:0;-moz-opacity: 0;filter: alpha(opacity=0);"><p>阅谁问君诵,水落清香浮</p></li> <li style="opacity:0;-moz-opacity: 0;filter: alpha(opacity=0);"><p>阅谁问君诵,水落清香浮</p></li> <li style="opacity:0;-moz-opacity: 0;filter: alpha(opacity=0);"><p>+++++++++++++++</p></li>
scrollpagination.js
(function( $ ){ $.fn.scrollPagination = function(options) { var opts = $.extend($.fn.scrollPagination.defaults, options); var target = opts.scrollTarget; if (target == null){ target = obj; } opts.scrollTarget = target; return this.each(function() { $.fn.scrollPagination.init($(this), opts); }); }; $.fn.stopScrollPagination = function(){ return this.each(function() { $(this).attr('scrollPagination', 'disabled'); }); }; $.fn.scrollPagination.loadContent = function(obj, opts){ var target = opts.scrollTarget; var mayLoadContent = $(target).scrollTop()+opts.heightOffset >= $(document).height() - $(target).height(); if (mayLoadContent){ if (opts.beforeLoad != null){ opts.beforeLoad(); } $(obj).children().attr('rel', 'loaded'); $.ajax({ type: 'POST', url: opts.contentPage, data: opts.contentData, success: function(data){ $(obj).append(data); var objectsRendered = $(obj).children('[rel!=loaded]'); if (opts.afterLoad != null){ opts.afterLoad(objectsRendered); } }, dataType: 'html' }); } }; $.fn.scrollPagination.init = function(obj, opts){ var target = opts.scrollTarget; $(obj).attr('scrollPagination', 'enabled'); $(target).scroll(function(event){ if ($(obj).attr('scrollPagination') == 'enabled'){ $.fn.scrollPagination.loadContent(obj, opts); } else { event.stopPropagation(); } }); $.fn.scrollPagination.loadContent(obj, opts); }; $.fn.scrollPagination.defaults = { 'contentPage' : null, 'contentData' : {}, 'beforeLoad': null, 'afterLoad': null , 'scrollTarget': null, 'heightOffset': 0 }; })( jQuery );
index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script type="text/javascript" src="js/jquery-1.10.1.min.js"></script> <script type="text/javascript" src="js/scrollpagination.js"></script> <script type="text/javascript"> $(function(){ $('#content').scrollPagination({ 'contentPage': 'demo.html', //你要搜索结果的页面 'contentData': {},//你可以通过 children().size() 知道哪里是分页 //谁该怎么滚动?在这个例子中,完整的窗口 'scrollTarget': $(window), //在页面到达结束之前,从多少像素开始加载? 'heightOffset': 10, //前负荷,一些功能,可能显示一个加载DIV 'beforeLoad': function(){ $('#loading').fadeIn(); }, 'afterLoad': function(elementsLoaded){ //加载后,一些功能的动画结果和隐藏预载的div $('#loading').fadeOut(); var i = 0; $(elementsLoaded).fadeInWithDelay(); //如果超过100结果加载停止分页(仅用于测试) if ($('#content').children().size() > 100){ $('#nomoreresults').fadeIn(); $('#content').stopScrollPagination(); } } }); //元件中的延迟元件的褪色代码 $.fn.fadeInWithDelay = function(){ var delay = 0; return this.each(function(){ $(this).delay(delay).animate({opacity:1}, 200); delay += 100; }); }; }); </script> </head> <body> <div id="demo"> <div style="height:2000px;"></div> <ul id="content" style=" margin:0 auto; width:800px; color:#f60; background-color:eee;"> <li><p>内容开始</p></li> </ul> <div class="loading" id="loading">加载中</div> <div class="loading" id="nomoreresults">结束了</div> </div> </body> </html>
效果图:
相关推荐
下面小编就为大家带来一篇js/jquery控制页面动态加载数据 滑动滚动条自动加载事件的方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
下面小编就为大家分享一篇jquery在启动页面时,自动加载数据的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
使用JQUERY,加载页面自弹出效果,可打开、关闭。
jquery 上拉加载更多 当页面距离底部小于100像素时自动加载
在页面加载的时候自动为日期插件添加当前日期。 [removed] $(document).ready(function(){ $("#startTime").val(formatDate()); $("#endTime").val(formatDate()); } jsp页面的body部分代码: <td><label>日期:...
主要介绍了基于JQuery实现滚动到页面底端时自动加载更多信息,类似微博,新浪新闻的评论等,都采用了这方法,需要的朋友可以参考下
主要介绍了jQuery+ajax实现滚动到页面底部自动加载图文列表效果,模拟图片懒加载功能,涉及jQuery的ajax与asp.net交互动态显示页面内容的相关技巧,需要的朋友可以参考下
很多社交网站都使用无限滚动的翻页技术来提高用户体验,当你页面滑到列表底部时候无需点击就自动加载更多的内容。下面为你推荐 10 个 jQuery 的无限滚动的插件: 1. jQuery ScrollPagination jQuery ...
在接下来的博文中,我们将介绍如何实现自动加载更多的功能。 图1 微博加载更多功能 正文 假设,在我们的数据库中存放着用户的消息数据,现在,我们需要通过Web Service形式开放API接口让客户端调用,当然我们也可以...
设置页面加载时滚动条自动滚到底的方法: jQuery: 代码如下: $(function(){ var h = $(document).height()-$(window).height(); $(document).scrollTop(h); }); JavaScript: 代码如下: [removed] = ...
骨架屏幕背后的概念是使用空页面,这些空页面在可用时逐渐填充内容-页面的不可变区域在加载时立即呈现,显示为中性色块,并逐渐被内容(例如图像,标题)取代以及界面标签。 (摘自非常好的文章) “ lo ...
b)JQ判断滚动条向下滚动的长度大于多少时,这个方法,也可以用来做页面的自动加载…就是你不停滚动,数据就不停加载…用户体验很好的喔【有时间就写】 1)首先我们写好DOM结构、写好CSS样式表 /* HTML */ <!--...
jQuery定位滚动tab选项卡特效,点击选项卡栏目上的周数能自动平滑滚动到对应的区域,页面加载时能根据当前星期滚动到对应的区域,适合电视电影等网站使用。
点击让浏览器网页进入全屏和退出全屏,jq插件,需加载jquery
我们浏览有些网页的时候,当拉动浏览器的滚动条时到页底时,页面会继续自动加载更多内容供用户浏览。这种技术我暂且称它为滚屏加载技术,我们发现很多网站用到这种技术,例如新浪微博、QQ空间等。 代码如下: 代码...
主要介绍了jQuery实现滚动到底部时自动加载更多的方法,涉及jQuery基于ajax动态操作页面元素相关实现技巧,需要的朋友可以参考下
jQ自动补全效果,就是大家所说的自动完成AutoComplete功能的代码,在页面加载时就获取,然后用户输入匹配提前加载的数据,根据用户输入到数据库查找匹配的数据显示上来,前三个框都是属于第一种,最后一个框模拟百度...