注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

Bioinformatics home

 
 
 

日志

 
 

页面滚动动态加载数据,页面下拉自动加载内容 (jquery)  

2013-02-22 11:31:02|  分类: Jquery |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
<!DOCTYPE=html>  
<html>  
<head>  
<script src="jquery-1.7.2.js" type="text/javascript"></script>  
  
   <script type="text/javascript">  
    $(document).ready(function(){  
        var range = 50;             //距下边界长度/单位px  
        var elemt = 500;           //插入元素高度/单位px  
        var maxnum = 20;            //设置加载最多次数  
        var num = 1;  
        var totalheight = 0;   
        var main = $("#content");                     //主体元素  
        $(window).scroll(function(){  
            var srollPos = $(window).scrollTop();    //滚动条距顶部距离(页面超出窗口的高度)  
              
            //console.log("滚动条到顶部的垂直高度: "+$(document).scrollTop());  
            //console.log("页面的文档高度 :"+$(document).height());  
            //console.log('浏览器的高度:'+$(window).height());  
              
            totalheight = parseFloat($(window).height()) + parseFloat(srollPos);  
            if(($(document).height()-range) <= totalheight  && num != maxnum) {  
                main.append("<div style='border:1px solid tomato;margin-top:20px;color:#ac"+(num%20)+(num%20)+";height:"+elemt+"' >hello world"+srollPos+"---"+num+"</div>");  
                num++;  
            }  
        });  
    });  
    </script>  
</head>  
<body>  
    <div id="content" style="height:960px">  
        <div id="follow">this is a scroll test;<br/>    页面下拉自动加载内容</div>  
        <div style='border:1px solid tomato;margin-top:20px;color:#ac1;height:800' >hello world test DIV</div>  
          
    </div>  
</body>  
</html>  
cited from http://blog.csdn.net/saindy5828/article/details/7756315 
  评论这张
 
阅读(8224)| 评论(1)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017