ERDS网校 - ERDS企业自主信息化培训,交流

查看: 298|回复: 0

滚动条加载

[复制链接]

37

主题

42

帖子

144

积分

注册会员

Rank: 2

积分
144
发表于 2015-11-27 14:03:34 | 显示全部楼层 |阅读模式
window.onscroll = function()
            {
                var water = document.getElementById("water");
                water.style.top = (document.documentElement.scrollTop|document.body.scrollTop)+'px';
                water.innerHTML = "scrollTop:" + (document.documentElement.scrollTop|document.body.scrollTop) + "<br/>ClientHeight:" + document.documentElement.clientHeight + "<br/>scrollHeight:" + document.documentElement.scrollHeight;
                //滚动条在最底端的时候
                if (document.documentElement.scrollHeight == (document.documentElement.scrollTop|document.body.scrollTop)+document.documentElement.clientHeight) {
                    //到最底端去请求新数据
                    var table=I.$('tag','table')[0];
                    var start=parseInt(table.rows[table.rows.length-1].cells[0].innerHTML)+1;
                    var length=10;
                    var param='start='+start+'&length='+length;
                    I.AJAX.post('/test2/DataServlet',param,function(o){ var persons=I.AJAX.json(o.responseText);
                        //加载新的十行数据
                        for(var i=0;i<persons.length;i++){
                            var row=table.insertRow(table.rows.length);
                            row.insertCell(0).innerHTML=persons[i].id;
                            row.insertCell(1).innerHTML=persons[i].name;
                            row.insertCell(2).innerHTML=persons[i].age;
                            row.insertCell(3).innerHTML=persons[i].hoppy;
                        } //删除前十行数据
                        for(var i=0;i<10;i++){
                            table.deleteRow(1);
                        }
                        window.scroll(0,parseInt(document.documentElement.scrollTop)-15);
                        //设置滚动条的位置
                       }); }
                //滚动条在最顶端的时候
                if((document.documentElement.scrollTop|document.body.scrollTop)==0){
                    var table=I.$('tag','table')[0];
                    var e=table.rows[1].cells[0].innerHTML;
                    if(e!='0')
                    {
                        var s=parseInt(e)-10<0?0:parseInt(e)-10;
                        var param='start='+s+'&length=10';
                        I.AJAX.post('/test2/DataServlet',param,function(o){
                            var persons=I.AJAX.json(o.responseText);
                            //加载新的十行数据
                            for(var i=0;i<persons.length;i++){
                                var row=table.insertRow(i+1);
                                row.insertCell(0).innerHTML=persons[i].id;
                                row.insertCell(1).innerHTML=persons[i].name;
                                row.insertCell(2).innerHTML=persons[i].age;
                                row.insertCell(3).innerHTML=persons[i].hoppy;
                            }
                            //删除后十行数据
                            for(var i=0;i<10;i++){
                                table.deleteRow(table.rows.length-1);
                            } window.scroll(0,15);
                            //设置滚动条的位置
                        }); } }
    滚动加载
      if ($(document).scrollTop() >= $(document).height() - $(window).height())
                下边的代码是使用Jquery来实现:
                //感应滚动条的高度载入新内容
                    $(window).scroll(function(){
                        aa=parseInt($(document).height());
                        //获取文档的高度
                        oo=parseInt($(document).scrollTop());
                        //获取滚动条到顶部的垂直高度
                        if((aa-oo)<800){
                           if(!window.ia){
                            ia=1;
                            $.post("sys.php",{work:"hotels",s'a=c+d 中国e+f&g>h')},function(msg){
                                //用ajax即时获取伺服器上的资料
                                if(msg.length>0){ $("#index #tab5 #tab19").last().after(msg);
                                    ia=null;
                                }
                                else{
                                    $("#index #div2").last().remove();
                                    $("#index #tab5 #tab19").last().after('<span>Error:没有搜寻到任何结果,请尝试更换搜寻条件!</span>');
                                }
                            });
                        }
                        }
                    });
exec('select top ' + @pagesize +  ' a.*,b.Type_CD,b.Question_DESC,c.PhItem_NM,d.Type_DESC
from T_FIFA_PhysicalItem_Winner a,T_FIFA_Question b,T_FIFA_PhysicalItem c,T_FIFA_Question_Type d
where a.Question_NBR = b.Question_NBR and a.PhItem_CD = c.PhItem_CD and b.Type_CD = d.Type_CD and
a.Winner_NBR not in (select top ' + @usedcount + ' a.Winner_NBR from T_FIFA_PhysicalItem_Winner a order by a.Winner_NBR asc) order by a.Winner_NBR asc')

$(".tiezi:visible").last().after('<div class="tiezi"><a class="bbsdian" style="background-image:url(/Files/BBS/%e6%8e%8c%e7%9c%bc/oqRu2jutTUk1CnXbfOWdTHaIDUc0/20131125080159373_thumb.jpg);"竹木");"></a><span style="background-color: transparent;" class="tiezicont"><a><span class="tzdis" style="color: rgb(44, 144, 201); font-weight: bold; background-color: transparent;">翡翠手把件黄翡雕件</span><span class="tzdis">卖家:LEO</span><span style="background-color: transparent;" class="tzdis">日期:11-22</span>价格:<span style="color:red;font-weight:bold;">议价</span></a>&nbsp;(<aclass="bbsmore">玉器</a>)</span></div>')
"<div class='tiezi'><a class='bbsdian' style='background-image:url(/Files/BBS/%e6%8e%8c%e7%9c%bc/oqRu2jutTUk1CnXbfOWdTHaIDUc0/20131125080159373_thumb.jpg);' onclick='$app.View(4,182,'竹木');'></a><span style='background-color: transparent;' class='tiezicont'><a onclick='$app.View(3,178,&quot;玉器&quot;);'><span class='tzdis' style='color: rgb(44, 144, 201); font-weight: bold; background-color: transparent;'>翡翠手把件黄翡雕件</span><span class='tzdis'>卖家:LEO</span><span style='background-color: transparent;' class='tzdis'>日期:11-22</span>价格:<span style='color:red;font-weight:bold;'>议价</span></a>&nbsp;(<a onclick='$app.Show(3,&quot;玉器&quot;)'class='bbsmore'>玉器</a>)</span></div>"
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|ERDS网校   点击这里给我发消息

快速回复 返回顶部 返回列表