原生JS小应用：模拟电商首页产品“楼层”定位应用

作者：天空2021.11.08来源：Web前端之家浏览：4018评论:0

关键词：js

分享一个原生Javascript小应用：模拟电商首页产品“楼层”定位应用。先看下效果图展示，如下：

QQ截图20211108092242.jpg

我们可以点击左边不同的层tag可以对应定位不到对应的页面元素。来看下代码吧：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>原生JS小应用：模拟电商首页产品“楼层”定位应用 - Web前端之家https://www.jiangweishan.com</title>
    <style>
  * {
            margin: 0;
            padding: 0;
        }
         
        html,
        body {
            width: 100%;
            height: 100%;
        }
         
        ul {
            width: 100%;
            height: 100%;
        }
         
        ul>li {
            list-style: none;
            width: 100%;
            height: 100%;
            font-size: 100px;
            text-align: center;
        }
         
        ol {
            position: fixed;
            left: 10px;
            top: 50%;
            transform: translateY(-50%);
        }
         
        ol>li {
            list-style: none;
            width: 100px;
            line-height: 40px;
            text-align: center;
            border: 1px solid #000;
        }
         
        .selected {
            background: skyblue;
        }
    </style>
</head>
<body>
  <ul>
      <li>我是第1层</li>
      <li>我是第2层</li>
      <li>我是第3层</li>
      <li>我是第4层</li>
      <li>我是第5层</li>
  </ul>

  <ol>
      <li class="selected">第1层</li>
      <li>第2层</li>
      <li>第3层</li>
      <li>第4层</li>
      <li>第5层</li>
  </ol>

  <script>
    // 1.初始化楼层的颜色
let oPages = document.querySelectorAll("ul>li");
let colorArr = ['green', 'blue', 'purple', 'red', 'yellow'];
        for (let i = 0; i < oPages.length; i++) {
            let page = oPages[i];
            page.style.background = colorArr[i];
        }
 
        // 2.实现点击谁就选中谁
        let oItems = document.querySelectorAll("ol>li");
        let currentItem = oItems[0];
 
        // 获取可视区域的高度
        let screenHeight = getScreen().height;
 
        let timerId = null;
        for (let i = 0; i < oItems.length; i++) {
            let item = oItems[i];
            item.onclick = function() {
                currentItem.className = "";
                this.className = "selected";
                currentItem = this;
                // 实现滚动
                // window.scrollTo(0, i * screenHeight);
                // 注意点: 通过documentElement.scrollTop来实现网页滚动, 在设置值的时候不能添加单位
                // document.documentElement.scrollTop = i * screenHeight + "px";
                // document.documentElement.scrollTop = i * screenHeight;
                clearInterval(timerId);
                timerId = setInterval(function() {
                    let begin = document.documentElement.scrollTop;
                    let target = i * screenHeight;
                    let step = (target - begin) * 0.2;
                    begin += step;
                    if (Math.abs(Math.floor(step)) <= 1) {
                        clearInterval(timerId);
                        document.documentElement.scrollTop = i * screenHeight;
                        return;
                    }
                    document.documentElement.scrollTop = begin;
                }, 50);
            }
        }
 
        //获取浏览器视口宽高
        function getScreen() {
            let width, height;
            if (window.innerWidth) {
                width = window.innerWidth;
                height = window.innerHeight;
            } else if (document.compatMode === "BackCompat") {
                width = document.body.clientWidth;
                height = document.body.clientHeight;
            } else {
                width = document.documentElement.clientWidth;
                height = document.documentElement.clientHeight;
            }
            return {
                width: width,
                height: height
            }
        }
  </script>
</body>
</html>

预览看下效果吧，当然你也可以优化下，加下滑动的时候自动定位。有问题可以留言。

赏您的支持是我们创作的动力！