最新消息:文章中包含代码时,请遵守代码高亮规范!

js实现京东楼层【转载】

杂项 Kate 113浏览 0评论
  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset=“UTF-8”>
  5.         <title></title>
  6.         <style type=“text/css”>
  7.             *{
  8.                 padding: 0;
  9.                 margin: 0;
  10.             }
  11.             .content{
  12.                 width: 500px;
  13.                 height: 500px;
  14.                 line-height: 500px;
  15.                 text-align: center;
  16.                 border: 1px solid red;
  17.             }
  18.             ul{
  19.                 position: fixed;
  20.                 list-style: none;
  21.                 width: 500px;
  22.                 clear: both;
  23.                 height: 40px;
  24.                 top: 0;
  25.                 left: 0;
  26.                 border: 1px solid blue;
  27.             }
  28.             li{
  29.                 float: left;
  30.                 width: 80px;
  31.                 height: 40px;
  32.                 line-height: 40px;
  33.                 text-align: center;
  34.                 cursor: pointer;
  35.                 border-right: 1px solid royalblue;
  36.             }
  37.             .active{
  38.                 color: red;
  39.             }
  40.         </style>
  41.     </head>
  42.     <body>
  43.         <ul>
  44.             <li class=“active”>一楼女装</li>
  45.             <li>二楼男装</li>
  46.             <li>三楼童装</li>
  47.             <li>四楼美妆</li>
  48.             <li>五楼家店</li>
  49.         </ul>
  50.         <div class=“content” style=“padding-top: 40px;”>一楼女装</div>
  51.         <div class=“content”>二楼男装</div>
  52.         <div class=“content”>三楼童装</div>
  53.         <div class=“content”>四楼美妆</div>
  54.         <div class=“content”>五楼家店</div>
  55.     </body>
  56.     <script type=“text/javascript”>
  57.         var ul = document.getElementsByTagName(“ul”)[0];
  58.         var lis = ul.getElementsByTagName(“li”);
  59.         var contents = document.getElementsByClassName(“content”);
  60.         var floors = [];
  61.         var activeNum = 0;
  62.         var to = 0
  63. //      var con = contents[0].offsetHeight;
  64.         for (var i = 0; i < contents.length; i++) {
  65.             to = contents[i].offsetHeight + to;
  66.             floors.push(to);
  67.             console.log(to);
  68.         }
  69.         for (var i = 0; i < lis.length; i++) {
  70.             !function (i){
  71.                 lis[i].onclick = function (){
  72.                     lis[activeNum].className = “”;
  73.                     lis[i].className = “active”;
  74.                     activeNum = i;
  75. //                  document.body.scrollTop = floors[i] – 542 ;
  76.                     document.body.scrollTop = floors[i] – contents[0].offsetHeight ;
  77.                     console.log(floors[i] – contents[0].offsetHeight);
  78.                 }
  79.             }(i)
  80.         }
  81.     </script>
  82. </html>

转载时请注明出处及相应链接,本文永久地址:https://blog.yayuanzi.com/23894.html


pay_weixin
pay_weixin
微信打赏
pay_weixin
支付宝打赏
感谢您对作者Kate的打赏,我们会更加努力!    如果您想成为作者,请点我

您必须 登录 才能发表评论!