分类目录

链接

2012年十一月
« 10月   12月 »
 1234
567891011
12131415161718
19202122232425
2627282930  

近期文章

热门标签

博主推荐

现在位置:    首页 > .NET, JS/JQUREY/CSS, PHP > 正文
滚动条到最下面时自动加载内容
.NET, JS/JQUREY/CSS, PHP 评论(1) 阅读(3,654)

滚动条到最下面时自动加载内容,JS实现

  1. //Author:数据库之家
  2. //URL:http://www.uol123.com
  3. var page=0;
  4. $(window).scroll(function() {
  5.     var o = $('#jokelist');
  6.     if(o!=null ){
  7.         //var hght= document.body.scrollHeight;
  8.         //var clt =document.documentElement.clientHeight;
  9.         //var top= document.documentElement.scrollTop ;
  10.         var hght= $(document).height();// 整个页面的高度
  11.         var clt =$(window).height(); // 当前可见页面高度
  12.         var top= $(document).scrollTop();// 滚动条距顶部高度
  13.         if(top>=(parseInt(hght)-clt)>>page<5){//加载前5页的
  14.             page=parseInt(page)+1;
  15.             ReadMore(page);
  16.         }
  17.     }
  18. }); 
  19.  
  20.  
  21.  
  22. function ReadMore(page){
  23.     $("#news-bottom-list").html('正在获取信息...');
  24.     $("#news-bottom-list").append('<img src="img/dailyfun/loading2.gif">');
  25.     next=parseInt(page)+1;
  26.     setTimeout(function(){
  27.         html=$.get('readmore.php','p='+page+'>s=10',function (data){
  28.             $("#jokelist").append(data);
  29.             if(next<=5){
  30.                 $("#news-bottom-list").html("<a href='javascript:void(0);' onclick='ReadMore("+next+");'>查看更多资讯↓</a>");
  31.             }else{
  32.                 $("#news-bottom-list").html("");
  33.             }
  34.         });
  35.     },500);//等待0.5S后开始加载,你也可以去掉这个时间
  36.     
  37. }

本文版权归数据库之家所有,转载引用请完整注明以下信息:
本文作者:Bruce
本文地址:滚动条到最下面时自动加载内容 | 数据库之家