您现在的位置是:首页 > 个人博客日记 个人博客日记

滑动动态加载楼层

2016-01-01 09:29:46

  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>
  36. <div class="header">头部内容</div>
  37. <div class="yb_louceng_1">楼层1内容</div>
  38. <div class="yb_louceng_2">楼层2内容</div>
  39. <div class="yb_louceng_3">楼层3内容</div>
  40. <div class="yb_louceng_4">楼层4内容</div>
  41. </body>
  42. </html>
  1. <script src="http://itma.xin/jquery-1.8.3.min.js"></script>
  2. <script>
  3. $(function(){
  4. //载入页面时执行加载
  5. yb_louceng_panduan();
  6. //浏览器滚动时执行加载
  7. $(window).scroll(function(){
  8. yb_louceng_panduan();
  9. });
  10. });
  11. //楼层位置数组
  12. var yb_louceng_weizhi = new Array();
  13. yb_louceng_weizhi[0] = new Array();
  14. yb_louceng_weizhi[0]["start"] = 0;
  15. yb_louceng_weizhi[0]["end"] = 1000;
  16. yb_louceng_weizhi[0]["state"] = false;
  17. yb_louceng_weizhi[1] = new Array();
  18. yb_louceng_weizhi[1]["start"] = 1000;
  19. yb_louceng_weizhi[1]["end"] = 1640;
  20. yb_louceng_weizhi[1]["state"] = false;
  21. yb_louceng_weizhi[2] = new Array();
  22. yb_louceng_weizhi[2]["start"] = 1640;
  23. yb_louceng_weizhi[2]["end"] = 2280;
  24. yb_louceng_weizhi[2]["state"] = false;
  25. yb_louceng_weizhi[3] = new Array();
  26. yb_louceng_weizhi[3]["start"] = 2280;
  27. yb_louceng_weizhi[3]["end"] = 2920;
  28. yb_louceng_weizhi[3]["state"] = false;
  29. yb_louceng_weizhi[4] = new Array();
  30. yb_louceng_weizhi[4]["start"] = 2920;
  31. yb_louceng_weizhi[4]["end"] = 3560;
  32. yb_louceng_weizhi[4]["state"] = false;
  33. //楼层判断执行函数
  34. function yb_louceng_panduan(){
  35. var yb_getScrollTop = getScrollTop(); //滚动条在Y轴上的滚动距离
  36. var yb_getWindowHeight = getWindowHeight(); //浏览器窗口高度
  37. var yb_chufa_zuixiao_y = yb_getScrollTop; //触发的最小y值
  38. var yb_chufa_zuida_y = yb_getScrollTop+yb_getWindowHeight; //触发的最大y值
  39. //循环判断
  40. for(var i=0;i<yb_louceng_weizhi.length;i++){
  41. var yb_panduan_left_1 = yb_chufa_zuixiao_y>=yb_louceng_weizhi[i]["start"] && yb_chufa_zuixiao_y<=yb_louceng_weizhi[i]["end"];
  42. var yb_panduan_left_2 = yb_chufa_zuida_y>=yb_louceng_weizhi[i]["start"] && yb_chufa_zuida_y<=yb_louceng_weizhi[i]["end"];
  43. var yb_panduan_left_3 = yb_chufa_zuixiao_y<=yb_louceng_weizhi[i]["start"] && yb_chufa_zuida_y>=yb_louceng_weizhi[i]["end"];
  44. if((yb_panduan_left_1 || yb_panduan_left_2 || yb_panduan_left_3) && yb_louceng_weizhi[i]["state"]==false){
  45. //改变楼层状态
  46. yb_louceng_weizhi[i]["state"] = true;
  47. alert("正在加载第"+i+"个楼层");
  48. //在此处构建ajax请求楼层数据
  49. //处理异步数据的逻辑结构开始
  50. //=================================
  51. // alert(1);
  52. //=================================
  53. //处理异步数据的逻辑机构完
  54. }
  55. }
  56. }
  57. //滚动条在Y轴上的滚动距离
  58. function getScrollTop(){
  59. var scrollTop = 0, bodyScrollTop = 0, documentScrollTop = 0;
  60. if(document.body){
  61. bodyScrollTop = document.body.scrollTop;
  62. }
  63. if(document.documentElement){
  64. documentScrollTop = document.documentElement.scrollTop;
  65. }
  66. scrollTop = (bodyScrollTop - documentScrollTop > 0) ? bodyScrollTop : documentScrollTop;
  67. return scrollTop;
  68. }
  69. //文档的总高度
  70. function getScrollHeight(){
  71. var scrollHeight = 0, bodyScrollHeight = 0, documentScrollHeight = 0;
  72. if(document.body){
  73. bodyScrollHeight = document.body.scrollHeight;
  74. }
  75. if(document.documentElement){
  76. documentScrollHeight = document.documentElement.scrollHeight;
  77. }
  78. scrollHeight = (bodyScrollHeight - documentScrollHeight > 0) ? bodyScrollHeight : documentScrollHeight;
  79. return scrollHeight;
  80. }
  81. //浏览器视口的高度
  82. function getWindowHeight(){
  83. var windowHeight = 0;
  84. if(document.compatMode == "CSS1Compat"){
  85. windowHeight = document.documentElement.clientHeight;
  86. }else{
  87. windowHeight = document.body.clientHeight;
  88. }
  89. return windowHeight;
  90. }
  91. </script>


关注TinyMeng博客,更多精彩分享,敬请期待!
 

站点信息