楼层特效 

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>Title</title>
  6     <style>
  7         *{margin: 0;padding: 0;list-style: none;border:0;}
  8         html, body, ul{width: 100%;height: 100%;}
  9         #ul li{
 10             width: 100%;
 11             height: 100%;
 12             text-align: center;
 13             font-size: 30px;
 14             /*background-color: red;*/
 15             color: #fff;
 16         }
 17 
 18         #ol{
 19             width: 80px;
 20             background-color: #ccc;
 21             position: fixed;
 22             left: 50px;
 23             top: 200px;
 24             border: 1px solid #fff;
 25         }
 26 
 27         #ol li{
 28             text-align: center;
 29             line-height: 30px;
 30             border-bottom: 1px solid #fff;
 31             color: #fff;
 32             cursor: pointer;
 33         }
 34 
 35         #ol li.current{
 36             background-color: orangered;
 37         }
 38     </style>
 39 </head>
 40 <body>
 41    <!--GPS-->
 42    <ol id="ol">
 43        <li class="current">第1层</li>
 44        <li>第2层</li>
 45        <li>第3层</li>
 46        <li>第4层</li>
 47        <li>第5层</li>
 48    </ol>
 49    <!--楼层-->
 50    <ul id="ul">
 51        <li>第1层内容</li>
 52        <li>第2层内容</li>
 53        <li>第3层内容</li>
 54        <li>第4层内容</li>
 55        <li>第5层内容</li>
 56    </ul>
 57 
 58 <script src="js/MyTool.js"></script>
 59 <script>
 60     window.addEventListener('load', function (ev) {
 61          // 1. 获取标签
 62         var ol = myTool.$('ol'), ul = myTool.$('ul');
 63         var ulLis = ul.children;
 64         var olLis = ol.children;
 65 
 66         // 是否是点击产生的滚动
 67         var isClick = false;
 68 
 69         // 2. 上色
 70         var colorArr = ['red', 'green', 'blue', 'purple', 'yellow'];
 71         for (var i = 0; i < colorArr.length; i++) {
 72             ulLis[i].style.backgroundColor = colorArr[i];
 73         }
 74 
 75         // 3. 监听GPS的点击
 76         for (var j = 0; j < olLis.length; j++) {
 77             var olLi = olLis[j];
 78             (function (index) {
 79                 olLi.addEventListener('click', function () {
 80                     isClick = true;
 81                     for (var i = 0; i < olLis.length; i++) {
 82                         olLis[i].className = '';
 83                     }
 84                     this.className = 'current';
 85                     // document.documentElement.scrollTop = index * myTool.client().height;
 86 
 87                     myTool.buffer(document.documentElement, {'scrollTop': index * myTool.client().height}, function () {
 88                         isClick = false;
 89                     });
 90                 });
 91             })(j)
 92         }
 93 
 94         // 4. 监听滚动
 95         var roll = 0;
 96         window.addEventListener('scroll', function (ev1) {
 97             if(!isClick){
 98                 console.log('滚动了~~~~~~~~~~~~~');
 99                 // 4.1 获取头部滚动偏移的高度
100                 roll = Math.ceil(Number(myTool.scroll().top));
101 
102                 // 4.2 遍历
103                 for (var i = 0; i < ulLis.length; i++) {
104                     // 4.3 判断
105                     if(roll >= ulLis[i].offsetTop){
106                         for (var j = 0; j < olLis.length; j++) {
107                             olLis[j].className = '';
108                         }
109                         olLis[i].className = 'current';
110                     }
111                 }
112             }
113         })
114     });
115 </script>
116 </body>
117 </html>

 

posted @ 2019-07-20 13:58  疏影横斜水清浅  阅读(192)  评论(1)    收藏  举报