说明:自从Bing搜索实现 滚动加载内容后,google,baidu都实现了类似的功能。
步骤 1: 打开Visual Studio 2010 ,新建项目www.scrollpage.com.
步骤 2:添加一个HTML文件,命名:ScrollLoadPage.html,项目引用了Jquery1.8.2框架
步骤 3:添加代码
<!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> <title>demo</title> <script src="jquery-1.8.2.min.js" type="text/javascript"></script> <style type="text/css"> div#Loadding { text-align: center; margin-top: 10px; display: none; font-weight: bold; color:Red; } div.content { 100%; height: 900px; border-bottom: 1px solid gray; font-weight: bold; color:Red;text-align: center;} </style> <script type="text/javascript"> if (!NeuF) var NeuF = {}; NeuF.ScrollPage = function (obj, options, callback) { var _defaultOptions = { delay: 500, marginBottom: 100 }; //默认配置:延迟时间delay和滚动条距离底部距离marginBottom options = $.extend(_defaultOptions, options); this.isScrolling = false; //是否在滚动 this.oriPos = 0; //原始位置 this.curPos = 0; //当前位置 var me = this; //顶层 var $obj = (typeof obj == "string") ? $("#" + obj) : $(obj); //绑定滚动事件 $obj.scroll(function (ev) { me.curPos = $obj.scrollTop(); if ($(window).height() + $(window).scrollTop() >= $(document.body).height() - options.marginBottom) { if (me.isScrolling == true) return; me.isScrolling = true; setTimeout(function () { me.isScrolling = false; }, options.delay); //重复触发间隔毫秒 if (typeof callback == "function") callback.call(null, me.curPos - me.oriPos); }; me.oriPos = me.curPos; }); }; $(function () { window.scrollTo(0, 0); //每次F5刷新把滚动条置顶 //marginBottom表示滚动条离底部的距离,0表示滚动到最底部才加载,可以根据需要修改 new NeuF.ScrollPage(window, { delay: 1000, marginBottom: 0 }, function (offset) { if (offset > 0) { $("#Loadding").show(); //加载提示 setTimeout(function () { //这里就是异步获取内容的地方,这里简化成一句话,可以根据需要修改 $("#divContainer").append($("<div class='content'>第“" + ($(".content").size() + 1) + "”页内容</div>")); //内容获取后,隐藏加载提示 $("#Loadding").hide(); }, 1000); } }); }); </script> </head> <body> <div id="divContainer"> <div class="content"> 这里是内容,尝试滚动,加载下一页内容。如果是大屏幕显示器,<br />请把CSS div.content 高度调高,以便看到滚动效果 </div> </div> <div id="Loadding"> 正在加载,请稍候 ...</div> </body> </html>
步骤 4: 在浏览器中查看ScrollLoadPage.html。
下面给出了项目源码 :
https://files.cnblogs.com/HCCZX/www.scrollpage.com.rar