随着滚动条的滚动加载数据 

<!DOCTYPE=html>
<html>
<head>
<script src="jquery-1.4.1.min.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 sh=$(window).scrollTop();
            //浏览器的高度
            var bh=$(window).height();
            //页面的文档高度
            var dh=$(document).height();
            
            totalheight = parseFloat(bh) + parseFloat(sh);
            if((dh-range) <= totalheight) {
                main.append("<div style='border:1px solid tomato;margin-top:20px;color:#ac"+(num%20)+(num%20)+";height:"+elemt+"' >hello world"+sh+"---"+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>

 

posted @ 2013-12-16 13:59  永不言败，自信相伴  阅读(504)  评论(0)    收藏  举报