明凯博客

关注网站技术,一个特立独行的程序员

Jquery实现页面下拉滚动动态加载内容

js实现页面下拉时,自动加载内容。

一般要用到ajax,然后就是浏览器滚动效果了。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
< !DOCTYPE=html>  
<html>  
<head>  
<script src="js/jquery.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+"");  
                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>

如果你只要实现动态加载数据的,那就直接调用哪个append事件吧。

页面动态加载ajax就不用教了吧。

, , , ,

相关文章

3 条评论 “Jquery实现页面下拉滚动动态加载内容

发表评论

电子邮件地址不会被公开。 必填项已用*标注