最新赞助活动温馨提示:9.9元终身VIP,学生和没有工作的整站资源免费下载!
头像

jQuery局部div滚动加载远程数据

来源:http://www.erdangjiade.com/ 二当家的 2016-02-19 19:13浏览(1868)

之前我们介绍了浏览器滚动条远程加载数据http://www.erdangjiade.com/js/9.html,这次我们介绍PHP+mysql局部div鼠标滚轮远程加载数据

1、请不要问“在不在”之类的问题,有问题直接问!2、学生或暂时没有工作的童鞋,整站资源免费下载!3、¥9.9充值终身VIP会员,整站资源无任何限制下载!5、程序员加油,交流群:782128964 在线 充值

jQuery局部div滚动加载远程数据
分类:PHP > Ajax 难易:高级
查看演示 下载资源: 208

关注微信号获取此Demo视频教程:

下载资源 下载积分: 30 积分

加载内容区域#lists

<div id="lists" style='height:490px;overflow: auto'></div>
i = 1; //设置当前页数 

$(function() {
    var totalpage = 6; //总页数,防止超过总页数继续滚动
    var winH = $(window).height(); //页面可视区域高度 

    $("#lists").scroll(function() {
        if (i < totalpage) { // 当滚动的页数小于总页数的时候,继续加载
            var pageH = $(document.body).height();
            var scrollT = $(window).scrollTop(); //滚动条top 
            var aa = (pageH - winH - scrollT) / winH;
            if (aa < 0.01) {
                getJson(i)
            }
        } else { //否则显示无数据
            showEmpty();
        }
    });
    getJson(0); //加载第一页
});
function getJson(page) {
    var msg_list = $('#lists');

    if (msg_list.height() + msg_list[0].scrollTop >= msg_list[0].scrollHeight - 60) {
        $(".nodata").show().html("<img src='http://www.erdangjiade.com/Public/images/loading.gif'/>");
        $.getJSON("ajax.php", {page: i}, function(json) {
            if (json) {
                var str = "";
                $.each(json, function(index, array) {
                    var str = "<div class='per'>";
                    var str = str + "<div class='title'>" + array['id'] + "、" + array['title'] + "</div></div>";
                    $("#lists").append(str);
                });
                $(".nodata").hide()
            } else {
                showEmpty();
            }
        });
        i++;
    }
}
function showEmpty() {
    $(".nodata").show().html("别滚动了,已经到底了。。。");
}
声明:本文为原创文章,如需转载,请注明来源erdangjiade.com并保留原文链接:https://www.erdangjiade.com/js/783.html
评论1
头像

友情提示:垃圾评论一律封号 最新福利:领取阿里云限量2000通用代金券

  • 头像 沙发
    01-07 09:34
    ngu137
    正在找这个功能呢,不错,,。。
1 2