浩海代码网，致力于做最实用的代码网，为个人站长与企业网络提供全面的站长资讯、网站运营等最新最全最实用的代码程序、提供下载源码，帮助程序员学好Linux、PHP、Nginx、MySQL、NoSQL、JavaScript、HTML5、CSS3等IT技术，更好地用技术改变世界，是程序员学习成长的好地方。

搜索：
热门搜索：
您的位置：浩海代码网 » JS代码 » [原创]仿Google Reader、新浪微博、腾讯微博等 随滚动条滚动加载页面效果

[原创]仿Google Reader、新浪微博、腾讯微博等 随滚动条滚动加载页面效果

JS代码  2011-04-26 13:50:47  作者: 浩海代码网  阅读()  评论   字号：大中小  订阅

Google阅读器上 有一个AJAX效果很不错，就是阅读项目时不需要翻页，浏览器滚动条往下拉到一定位置时自动加载新的一批项目进来，一直到所有项目加载完为止。对于不喜欢翻页的你来说，再好不过了，尤其是输入页码再定位到页。要知道，数据量增加很频繁时，要通过定位页码来找到目标数据似乎并没有什么意义。我觉得用户 体验成熟的WEB应用程序应当引导用户使用TAG或搜索等功能来找到目标数据。至于浏览数据，尤其是浏览最新的数据，利用浏览器滚动条来加载，是很好的尝试……

新浪微博、腾讯微博、知呼等也都是类似的效果，页面滚动到底部，自动加载新的内容进来，可以限制加载的次数等等，以下是我用jquery实现的效果：

<!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" />
<meta http-equiv="x-ua-compatible" content="ie=7" />
<title>滚动加载</title>
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.scrollLoad.js" type="text/javascript" charset="gbk"></script>
<script type="text/javascript">
$(document).ready(function(){
        $.scrollLoad(
    {
        'loadurl':'test.php', 
        'objid':'mypage', 
        'appendid':'body', 
        'loadtype':'post', 
        'loadnum':3
    }
    );
});

</script>
</head>

<body>
<div id="body">
 <div id="microblog_report" class="hover" style="margin-top:20px;"><ul>
  <li id="9634987693" name="【国家电网将投315亿元建华北特高压电网】- 国资委周一表示，国家..." style="cursor: pointer;">
   <span class="date"><span title="04-25">04-25</span></span>
   <span title="华尔街日报中文网" class="where">华尔街日报</span>
   【<font color="red">国家电网</font>将投315亿元建华北特高压电网】- 国资委周一表示，国家..
  </li>
  <li id="9634987693" name="【国家电网将投315亿元建华北特高压电网】- 国资委周一表示，国家..." style="cursor: pointer;">
   <span class="date"><span title="04-25">04-25</span></span>
   <span title="华尔街日报中文网" class="where">华尔街日报</span>
   【<font color="red">国家电网</font>将投315亿元建华北特高压电网】- 国资委周一表示，国家..
  </li>
  <li id="9634987693" name="【国家电网将投315亿元建华北特高压电网】- 国资委周一表示，国家..." style="cursor: pointer;">
   <span class="date"><span title="04-25">04-25</span></span>
   <span title="华尔街日报中文网" class="where">华尔街日报</span>
   【<font color="red">国家电网</font>将投315亿元建华北特高压电网】- 国资委周一表示，国家..
  </li>
  <li id="9634987693" name="【国家电网将投315亿元建华北特高压电网】- 国资委周一表示，国家..." style="cursor: pointer;">
   <span class="date"><span title="04-25">04-25</span></span>
   <span title="华尔街日报中文网" class="where">华尔街日报</span>
   【<font color="red">国家电网</font>将投315亿元建华北特高压电网】- 国资委周一表示，国家..
  </li>
  <li id="9634987693" name="【国家电网将投315亿元建华北特高压电网】- 国资委周一表示，国家..." style="cursor: pointer;">
   <span class="date"><span title="04-25">04-25</span></span>
   <span title="华尔街日报中文网" class="where">华尔街日报</span>
   【<font color="red">国家电网</font>将投315亿元建华北特高压电网】- 国资委周一表示，国家..
  </li>
  <li id="9634987693" name="【国家电网将投315亿元建华北特高压电网】- 国资委周一表示，国家..." style="cursor: pointer;">
   <span class="date"><span title="04-25">04-25</span></span>
   <span title="华尔街日报中文网" class="where">华尔街日报</span>
   【<font color="red">国家电网</font>将投315亿元建华北特高压电网】- 国资委周一表示，国家..
  </li>
  <li id="9634987693" name="【国家电网将投315亿元建华北特高压电网】- 国资委周一表示，国家..." style="cursor: pointer;">
   <span class="date"><span title="04-25">04-25</span></span>
   <span title="华尔街日报中文网" class="where">华尔街日报</span>
   【<font color="red">国家电网</font>将投315亿元建华北特高压电网】- 国资委周一表示，国家..
  </li>
  <li id="9634987693" name="【国家电网将投315亿元建华北特高压电网】- 国资委周一表示，国家..." style="cursor: pointer;">
   <span class="date"><span title="04-25">04-25</span></span>
   <span title="华尔街日报中文网" class="where">华尔街日报</span>
   【<font color="red">国家电网</font>将投315亿元建华北特高压电网】- 国资委周一表示，国家..
  </li>
  <li id="9634987693" name="【国家电网将投315亿元建华北特高压电网】- 国资委周一表示，国家..." style="cursor: pointer;">
   <span class="date"><span title="04-25">04-25</span></span>
   <span title="华尔街日报中文网" class="where">华尔街日报</span>
   【<font color="red">国家电网</font>将投315亿元建华北特高压电网】- 国资委周一表示，国家..
  </li>
  <li id="9634987693" name="【国家电网将投315亿元建华北特高压电网】- 国资委周一表示，国家..." style="cursor: pointer;">
   <span class="date"><span title="04-25">04-25</span></span>
   <span title="华尔街日报中文网" class="where">华尔街日报</span>
   【<font color="red">国家电网</font>将投315亿元建华北特高压电网】- 国资委周一表示，国家..
  </li>
 </ul>

</div>

<div id="microblog_report" class="hover" style="margin-top:20px;"><ul>
  <li id="9634987693" name="【国家电网将投315亿元建华北特高压电网】- 国资委周一表示，国家..." style="cursor: pointer;">
   <span class="date"><span title="04-25">04-25</span></span>
   <span title="华尔街日报中文网" class="where">华尔街日报</span>
   【<font color="red">国家电网</font>将投315亿元建华北特高压电网】- 国资委周一表示，国家..
  </li>
  <li id="9634987693" name="【国家电网将投315亿元建华北特高压电网】- 国资委周一表示，国家..." style="cursor: pointer;">
   <span class="date"><span title="04-25">04-25</span></span>
   <span title="华尔街日报中文网" class="where">华尔街日报</span>
   【<font color="red">国家电网</font>将投315亿元建华北特高压电网】- 国资委周一表示，国家..
  </li>
  <li id="9634987693" name="【国家电网将投315亿元建华北特高压电网】- 国资委周一表示，国家..." style="cursor: pointer;">
   <span class="date"><span title="04-25">04-25</span></span>
   <span title="华尔街日报中文网" class="where">华尔街日报</span>
   【<font color="red">国家电网</font>将投315亿元建华北特高压电网】- 国资委周一表示，国家..
  </li>
  <li id="9634987693" name="【国家电网将投315亿元建华北特高压电网】- 国资委周一表示，国家..." style="cursor: pointer;">
   <span class="date"><span title="04-25">04-25</span></span>
   <span title="华尔街日报中文网" class="where">华尔街日报</span>
   【<font color="red">国家电网</font>将投315亿元建华北特高压电网】- 国资委周一表示，国家..
  </li>
  <li id="9634987693" name="【国家电网将投315亿元建华北特高压电网】- 国资委周一表示，国家..." style="cursor: pointer;">
   <span class="date"><span title="04-25">04-25</span></span>
   <span title="华尔街日报中文网" class="where">华尔街日报</span>
   【<font color="red">国家电网</font>将投315亿元建华北特高压电网】- 国资委周一表示，国家..
  </li>
  <li id="9634987693" name="【国家电网将投315亿元建华北特高压电网】- 国资委周一表示，国家..." style="cursor: pointer;">
   <span class="date"><span title="04-25">04-25</span></span>
   <span title="华尔街日报中文网" class="where">华尔街日报</span>
   【<font color="red">国家电网</font>将投315亿元建华北特高压电网】- 国资委周一表示，国家..
  </li>
  <li id="9634987693" name="【国家电网将投315亿元建华北特高压电网】- 国资委周一表示，国家..." style="cursor: pointer;">
   <span class="date"><span title="04-25">04-25</span></span>
   <span title="华尔街日报中文网" class="where">华尔街日报</span>
   【<font color="red">国家电网</font>将投315亿元建华北特高压电网】- 国资委周一表示，国家..
  </li>
  <li id="9634987693" name="【国家电网将投315亿元建华北特高压电网】- 国资委周一表示，国家..." style="cursor: pointer;">
   <span class="date"><span title="04-25">04-25</span></span>
   <span title="华尔街日报中文网" class="where">华尔街日报</span>
   【<font color="red">国家电网</font>将投315亿元建华北特高压电网】- 国资委周一表示，国家..
  </li>
  <li id="9634987693" name="【国家电网将投315亿元建华北特高压电网】- 国资委周一表示，国家..." style="cursor: pointer;">
   <span class="date"><span title="04-25">04-25</span></span>
   <span title="华尔街日报中文网" class="where">华尔街日报</span>
   【<font color="red">国家电网</font>将投315亿元建华北特高压电网】- 国资委周一表示，国家..
  </li>
  <li id="9634987693" name="【国家电网将投315亿元建华北特高压电网】- 国资委周一表示，国家..." style="cursor: pointer;">
   <span class="date"><span title="04-25">04-25</span></span>
   <span title="华尔街日报中文网" class="where">华尔街日报</span>
   【<font color="red">国家电网</font>将投315亿元建华北特高压电网】- 国资委周一表示，国家..
  </li>
 </ul>

</div>

<div id="microblog_report" class="hover" style="margin-top:20px;"><ul>
  <li id="9634987693" name="【国家电网将投315亿元建华北特高压电网】- 国资委周一表示，国家..." style="cursor: pointer;">
   <span class="date"><span title="04-25">04-25</span></span>
   <span title="华尔街日报中文网" class="where">华尔街日报</span>
   【<font color="red">国家电网</font>将投315亿元建华北特高压电网】- 国资委周一表示，国家..
  </li>
  <li id="9634987693" name="【国家电网将投315亿元建华北特高压电网】- 国资委周一表示，国家..." style="cursor: pointer;">
   <span class="date"><span title="04-25">04-25</span></span>
   <span title="华尔街日报中文网" class="where">华尔街日报</span>
   【<font color="red">国家电网</font>将投315亿元建华北特高压电网】- 国资委周一表示，国家..
  </li>
  <li id="9634987693" name="【国家电网将投315亿元建华北特高压电网】- 国资委周一表示，国家..." style="cursor: pointer;">
   <span class="date"><span title="04-25">04-25</span></span>
   <span title="华尔街日报中文网" class="where">华尔街日报</span>
   【<font color="red">国家电网</font>将投315亿元建华北特高压电网】- 国资委周一表示，国家..
  </li>
  <li id="9634987693" name="【国家电网将投315亿元建华北特高压电网】- 国资委周一表示，国家..." style="cursor: pointer;">
   <span class="date"><span title="04-25">04-25</span></span>
   <span title="华尔街日报中文网" class="where">华尔街日报</span>
   【<font color="red">国家电网</font>将投315亿元建华北特高压电网】- 国资委周一表示，国家..
  </li>
  <li id="9634987693" name="【国家电网将投315亿元建华北特高压电网】- 国资委周一表示，国家..." style="cursor: pointer;">
   <span class="date"><span title="04-25">04-25</span></span>
   <span title="华尔街日报中文网" class="where">华尔街日报</span>
   【<font color="red">国家电网</font>将投315亿元建华北特高压电网】- 国资委周一表示，国家..
  </li>
  <li id="9634987693" name="【国家电网将投315亿元建华北特高压电网】- 国资委周一表示，国家..." style="cursor: pointer;">
   <span class="date"><span title="04-25">04-25</span></span>
   <span title="华尔街日报中文网" class="where">华尔街日报</span>
   【<font color="red">国家电网</font>将投315亿元建华北特高压电网】- 国资委周一表示，国家..
  </li>
  <li id="9634987693" name="【国家电网将投315亿元建华北特高压电网】- 国资委周一表示，国家..." style="cursor: pointer;">
   <span class="date"><span title="04-25">04-25</span></span>
   <span title="华尔街日报中文网" class="where">华尔街日报</span>
   【<font color="red">国家电网</font>将投315亿元建华北特高压电网】- 国资委周一表示，国家..
  </li>
  <li id="9634987693" name="【国家电网将投315亿元建华北特高压电网】- 国资委周一表示，国家..." style="cursor: pointer;">
   <span class="date"><span title="04-25">04-25</span></span>
   <span title="华尔街日报中文网" class="where">华尔街日报</span>
   【<font color="red">国家电网</font>将投315亿元建华北特高压电网】- 国资委周一表示，国家..
  </li>
  <li id="9634987693" name="【国家电网将投315亿元建华北特高压电网】- 国资委周一表示，国家..." style="cursor: pointer;">
   <span class="date"><span title="04-25">04-25</span></span>
   <span title="华尔街日报中文网" class="where">华尔街日报</span>
   【<font color="red">国家电网</font>将投315亿元建华北特高压电网】- 国资委周一表示，国家..
  </li>
  <li id="9634987693" name="【国家电网将投315亿元建华北特高压电网】- 国资委周一表示，国家..." style="cursor: pointer;">
   <span class="date"><span title="04-25">04-25</span></span>
   <span title="华尔街日报中文网" class="where">华尔街日报</span>
   【<font color="red">国家电网</font>将投315亿元建华北特高压电网】- 国资委周一表示，国家..
  </li>
 </ul>

</div>

</div>

<div id="mypage" style="height:20px;margin:20px;cursor:pointer;">加载</div>

<div style="height:100px;border:1px solid #ff0000"></div>
</body>
</html>

js代码：

/*
 * scrollLoad 1.0 - Extremely Scroll Load Content for jQuery
 * http://code.haohailuo.com/
 *
 * Copyright (c) 2011 Laurence.xu code.haohailuo.com
 * Author Laurence.xu (haohailuo@163.com)
 */
/*
 * use demo
 * $.scrollLoad({'loadurl':'test.php', 'objid':'mypage', 'appendid':'body', 'loadtype':'post'}); ,默认为get加载
*/
(function($) {
 var run_num = 0, requesting = false, request_obj = null, run_interval;
 $.scrollLoad = function(options) {
  var opts = $.extend({}, $.scrollLoad.defaults, options);
  if(opts.loadurl == null || opts.loadurl == '') {
   return false;
  }
  
  if(opts.appendid == null || opts.appendid == '') {
   return false;
  }
  
  if(opts.objid != null && opts.objid != '') {
   $('#'+opts.objid).click(function(){
    //调用加载
    showContent(opts);
   });
  }
  
  run_interval = setInterval(function(){
   cando(opts);
  }, 1000);//每隔2秒钟调用一次cando函数来判断当前滚动条位置。
 };
 
 function showContent(opts) {
  if(requesting && request_obj) {
   /*request_obj.abort();
   requesting = false;
   request_obj = null;*/
   return false;
  }

  requesting = true;

  var old_content = $('#'+opts.objid).html();
  if(opts.loadtype == 'GET' || opts.loadtype == 'get') {
   $('#'+opts.objid).html('数据加载中...');
   request_obj = $.get(opts.loadurl, function(data) {
    requesting = false;
    request_obj = null;
    $('#'+opts.appendid).append(data);
    $('#'+opts.objid).html(old_content);
   });
  }else {
   $('#'+opts.objid).html('数据加载中...');
   request_obj = $.post(opts.loadurl, function(data) {
    requesting = false;
    request_obj = null;
    $('#'+opts.appendid).append(data);
    $('#'+opts.objid).html(old_content);
   });
  }
  
  run_num++;
 }
 
 function cando(opts){
  if(opts.loadnum > 0 && opts.loadnum <= run_num) {
   clearInterval(run_interval);
   return false;
  }
  
  var heights = $(window).height() + document.documentElement.scrollTop;
 
  if(heights > $('#'+opts.objid).offset().top) {
   showContent(opts);//如果是，调用showContent函数加载内容。
  }
 }
 
 //默认参数
 $.scrollLoad.defaults = {
  objid: null,   //点击触发加载的目标元素
  appendid: null,   //加载的内容添加到的目标元素
  loadnum: 5,    //加载次数
  loadurl: null,   //加载的url地址
  loadtype: 'GET'   //ajax加载方式
 };
}(jQuery));
源码下载： jquery.scroll.rar

转载请注明来源。

标签：Google jquery 腾讯微博 新浪微博 滚动加载 
阅读| 评论| 举报

评论

用户名： (*)

邮   箱： (*)

网   站：

内   容： (*)

推荐信息

热门信息

最近更新

标签(TAG)云

友情链接

×
订阅
订阅到阅读器：
 
数据正在加载中…