js滑动动态加载楼层

itinymeng

于 2024-09-09 10:08:04 发布

阅读量124

点赞数 3

分类专栏： web前端文章标签： web

本文链接：https://blog.csdn.net/qq_37639246/article/details/142051654

版权

web前端专栏收录该内容

10 篇文章 0 订阅

订阅专栏

<!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport"
              content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style>
            *{margin:0px;padding:0px;}
            body{height:10000px;}
            .header{
                height: 1000px;
                background-color: #0C3;
            }
            .yb_louceng_1{
                background-color: #03F;
                height: 640px;
            }
            .yb_louceng_2{
                background-color: #F33;
                height: 640px;
            }
            .yb_louceng_3{
                background-color: #03F;
                height: 640px;
                color: #093;
            }
            .yb_louceng_4{
                background-color: #F0F;
                height: 640px;
            }
        </style>
    </head>
    <body>
    <div class="header">头部内容</div>
    <div class="yb_louceng_1">楼层1内容</div>
    <div class="yb_louceng_2">楼层2内容</div>
    <div class="yb_louceng_3">楼层3内容</div>
    <div class="yb_louceng_4">楼层4内容</div>
    </body>
    </html>

<script src="//itma.xin/jquery-1.8.3.min.js"></script>
<script>
        $(function(){
            //载入页面时执行加载
            yb_louceng_panduan();
            //浏览器滚动时执行加载
            $(window).scroll(function(){
                yb_louceng_panduan();
            });
        });
        //楼层位置数组
        var yb_louceng_weizhi            =    new Array();
        yb_louceng_weizhi[0]            =    new Array();
        yb_louceng_weizhi[0]["start"]    =    0;
        yb_louceng_weizhi[0]["end"]        =    1000;
        yb_louceng_weizhi[0]["state"]    =    false;
        yb_louceng_weizhi[1]            =    new Array();
        yb_louceng_weizhi[1]["start"]    =    1000;
        yb_louceng_weizhi[1]["end"]        =    1640;
        yb_louceng_weizhi[1]["state"]    =    false;
        yb_louceng_weizhi[2]            =    new Array();
        yb_louceng_weizhi[2]["start"]    =    1640;
        yb_louceng_weizhi[2]["end"]        =    2280;
        yb_louceng_weizhi[2]["state"]    =    false;
        yb_louceng_weizhi[3]            =    new Array();
        yb_louceng_weizhi[3]["start"]    =    2280;
        yb_louceng_weizhi[3]["end"]        =    2920;
        yb_louceng_weizhi[3]["state"]    =    false;
        yb_louceng_weizhi[4]            =    new Array();
        yb_louceng_weizhi[4]["start"]    =    2920;
        yb_louceng_weizhi[4]["end"]        =    3560;
        yb_louceng_weizhi[4]["state"]    =    false;
        //楼层判断执行函数
        function yb_louceng_panduan(){
            var yb_getScrollTop        =    getScrollTop();        //滚动条在Y轴上的滚动距离
            var yb_getWindowHeight    =    getWindowHeight();    //浏览器窗口高度
            var yb_chufa_zuixiao_y    =    yb_getScrollTop;    //触发的最小y值
            var yb_chufa_zuida_y    =    yb_getScrollTop+yb_getWindowHeight;    //触发的最大y值
            //循环判断
            for(var i=0;i<yb_louceng_weizhi.length;i++){
                var yb_panduan_left_1    =    yb_chufa_zuixiao_y>=yb_louceng_weizhi[i]["start"] && yb_chufa_zuixiao_y<=yb_louceng_weizhi[i]["end"];
                var yb_panduan_left_2    =    yb_chufa_zuida_y>=yb_louceng_weizhi[i]["start"] && yb_chufa_zuida_y<=yb_louceng_weizhi[i]["end"];
                var yb_panduan_left_3    =    yb_chufa_zuixiao_y<=yb_louceng_weizhi[i]["start"] && yb_chufa_zuida_y>=yb_louceng_weizhi[i]["end"];
                if((yb_panduan_left_1 || yb_panduan_left_2 || yb_panduan_left_3) && yb_louceng_weizhi[i]["state"]==false){
                    //改变楼层状态
                    yb_louceng_weizhi[i]["state"]    =    true;
                    alert("正在加载第"+i+"个楼层");
                    //在此处构建ajax请求楼层数据
                    //处理异步数据的逻辑结构开始
                    //=================================
    //                alert(1);
                    //=================================
                    //处理异步数据的逻辑机构完
                }
            }
        }
        //滚动条在Y轴上的滚动距离
        function getScrollTop(){
            var scrollTop = 0, bodyScrollTop = 0, documentScrollTop = 0;
            if(document.body){
                bodyScrollTop = document.body.scrollTop;
            }
            if(document.documentElement){
                documentScrollTop = document.documentElement.scrollTop;
            }
            scrollTop = (bodyScrollTop - documentScrollTop > 0) ? bodyScrollTop : documentScrollTop;
            return scrollTop;
        }
        //文档的总高度
        function getScrollHeight(){
            var scrollHeight = 0, bodyScrollHeight = 0, documentScrollHeight = 0;
            if(document.body){
                bodyScrollHeight = document.body.scrollHeight;
            }
            if(document.documentElement){
                documentScrollHeight = document.documentElement.scrollHeight;
            }
            scrollHeight = (bodyScrollHeight - documentScrollHeight > 0) ? bodyScrollHeight : documentScrollHeight;
            return scrollHeight;
        }
        //浏览器视口的高度
        function getWindowHeight(){
            var windowHeight = 0;
            if(document.compatMode == "CSS1Compat"){
                windowHeight = document.documentElement.clientHeight;
            }else{
                windowHeight = document.body.clientHeight;
            }
            return windowHeight;
        }
    </script>