您现在的位置是：首页 > 博客日记 > Web前端 Web前端

滑动动态加载楼层

2016-01-01 09:29:46 【Web前端】 人已围观 

  1. <!doctype html>
  2.     <html lang="en">
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <meta name="viewport"
  6.               content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  7.         <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.         <title>Document</title>
  9.         <style>
  10.             *{margin:0px;padding:0px;}
  11.             body{height:10000px;}
  12.             .header{
  13.                 height: 1000px;
  14.                 background-color: #0C3;
  15.             }
  16.             .yb_louceng_1{
  17.                 background-color: #03F;
  18.                 height: 640px;
  19.             }
  20.             .yb_louceng_2{
  21.                 background-color: #F33;
  22.                 height: 640px;
  23.             }
  24.             .yb_louceng_3{
  25.                 background-color: #03F;
  26.                 height: 640px;
  27.                 color: #093;
  28.             }
  29.             .yb_louceng_4{
  30.                 background-color: #F0F;
  31.                 height: 640px;
  32.             }
  33.         </style>
  34.     </head>
  35.     <body>
  37.     <div class="header">头部内容</div>
  39.     <div class="yb_louceng_1">楼层1内容</div>
  40.     <div class="yb_louceng_2">楼层2内容</div>
  41.     <div class="yb_louceng_3">楼层3内容</div>
  42.     <div class="yb_louceng_4">楼层4内容</div>
  45.     </body>
  46.     </html>
  1. <script src="//itma.xin/jquery-1.8.3.min.js"></script>
  3. <script>
  5.         $(function(){
  6.             //载入页面时执行加载
  7.             yb_louceng_panduan();
  8.             //浏览器滚动时执行加载
  9.             $(window).scroll(function(){
  10.                 yb_louceng_panduan();
  12.             });
  13.         });
  15.         //楼层位置数组
  16.         var yb_louceng_weizhi            =    new Array();
  18.         yb_louceng_weizhi[0]            =    new Array();
  19.         yb_louceng_weizhi[0]["start"]    =    0;
  20.         yb_louceng_weizhi[0]["end"]        =    1000;
  21.         yb_louceng_weizhi[0]["state"]    =    false;
  22.         yb_louceng_weizhi[1]            =    new Array();
  23.         yb_louceng_weizhi[1]["start"]    =    1000;
  24.         yb_louceng_weizhi[1]["end"]        =    1640;
  25.         yb_louceng_weizhi[1]["state"]    =    false;
  26.         yb_louceng_weizhi[2]            =    new Array();
  27.         yb_louceng_weizhi[2]["start"]    =    1640;
  28.         yb_louceng_weizhi[2]["end"]        =    2280;
  29.         yb_louceng_weizhi[2]["state"]    =    false;
  30.         yb_louceng_weizhi[3]            =    new Array();
  31.         yb_louceng_weizhi[3]["start"]    =    2280;
  32.         yb_louceng_weizhi[3]["end"]        =    2920;
  33.         yb_louceng_weizhi[3]["state"]    =    false;
  34.         yb_louceng_weizhi[4]            =    new Array();
  35.         yb_louceng_weizhi[4]["start"]    =    2920;
  36.         yb_louceng_weizhi[4]["end"]        =    3560;
  37.         yb_louceng_weizhi[4]["state"]    =    false;
  40.         //楼层判断执行函数
  41.         function yb_louceng_panduan(){
  42.             var yb_getScrollTop        =    getScrollTop();        //滚动条在Y轴上的滚动距离
  43.             var yb_getWindowHeight    =    getWindowHeight();    //浏览器窗口高度
  44.             var yb_chufa_zuixiao_y    =    yb_getScrollTop;    //触发的最小y值
  45.             var yb_chufa_zuida_y    =    yb_getScrollTop+yb_getWindowHeight;    //触发的最大y值
  47.             //循环判断
  48.             for(var i=0;i<yb_louceng_weizhi.length;i++){
  50.                 var yb_panduan_left_1    =    yb_chufa_zuixiao_y>=yb_louceng_weizhi[i]["start"] && yb_chufa_zuixiao_y<=yb_louceng_weizhi[i]["end"];
  51.                 var yb_panduan_left_2    =    yb_chufa_zuida_y>=yb_louceng_weizhi[i]["start"] && yb_chufa_zuida_y<=yb_louceng_weizhi[i]["end"];
  52.                 var yb_panduan_left_3    =    yb_chufa_zuixiao_y<=yb_louceng_weizhi[i]["start"] && yb_chufa_zuida_y>=yb_louceng_weizhi[i]["end"];
  54.                 if((yb_panduan_left_1 || yb_panduan_left_2 || yb_panduan_left_3) && yb_louceng_weizhi[i]["state"]==false){
  55.                     //改变楼层状态
  56.                     yb_louceng_weizhi[i]["state"]    =    true;
  57.                     alert("正在加载第"+i+"个楼层");
  58.                     //在此处构建ajax请求楼层数据
  59.                     //处理异步数据的逻辑结构开始
  60.                     //=================================
  62.     //                alert(1);
  63.                     //=================================
  64.                     //处理异步数据的逻辑机构完
  65.                 }
  66.             }
  67.         }
  72.         //滚动条在Y轴上的滚动距离
  73.         function getScrollTop(){
  74.             var scrollTop = 0, bodyScrollTop = 0, documentScrollTop = 0;
  75.             if(document.body){
  76.                 bodyScrollTop = document.body.scrollTop;
  77.             }
  78.             if(document.documentElement){
  79.                 documentScrollTop = document.documentElement.scrollTop;
  80.             }
  81.             scrollTop = (bodyScrollTop - documentScrollTop > 0) ? bodyScrollTop : documentScrollTop;
  82.             return scrollTop;
  83.         }
  85.         //文档的总高度
  86.         function getScrollHeight(){
  87.             var scrollHeight = 0, bodyScrollHeight = 0, documentScrollHeight = 0;
  88.             if(document.body){
  89.                 bodyScrollHeight = document.body.scrollHeight;
  90.             }
  91.             if(document.documentElement){
  92.                 documentScrollHeight = document.documentElement.scrollHeight;
  93.             }
  94.             scrollHeight = (bodyScrollHeight - documentScrollHeight > 0) ? bodyScrollHeight : documentScrollHeight;
  95.             return scrollHeight;
  96.         }
  98.         //浏览器视口的高度
  99.         function getWindowHeight(){
  100.             var windowHeight = 0;
  101.             if(document.compatMode == "CSS1Compat"){
  102.                 windowHeight = document.documentElement.clientHeight;
  103.             }else{
  104.                 windowHeight = document.body.clientHeight;
  105.             }
  106.             return windowHeight;
  107.         }
  108.     </script>


关注TinyMeng博客，更多精彩分享，敬请期待！
 

很赞哦！ ()

下一篇：js实现图片上传预览原理

相关文章

迁移通知

本站已停止更新，已迁移至sns.bjwmsc.com

友情链接