欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

JS特效——导航栏楼层效果

程序员文章站 2022-05-28 19:41:33
...

知识点

  1. 多个事件有冲突的时候,需要设置flag判断是什么事件,进而进行后续操作。
  2. 楼层效果就是判断scrollTop和offsetTop的关系

运行效果

导航与界面实现互动
JS特效——导航栏楼层效果
JS特效——导航栏楼层效果

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{margin: 0;padding: 0;list-style: none;border:0;}
        html, body, ul{width: 100%;height: 100%;}
        #ul li{
            width: 100%;
            height: 100%;
            text-align: center;
            font-size: 30px;
            /*background-color: red;*/
            color: #fff;
        }

        #ol{
            width: 80px;
            background-color: #ccc;
            position: fixed;
            left: 50px;
            top: 200px;
            border: 1px solid #fff;
        }

        #ol li{
            text-align: center;
            line-height: 30px;
            border-bottom: 1px solid #fff;
            color: #fff;
            cursor: pointer;
        }

        #ol li.current{
            background-color: orangered;
        }
    </style>
</head>
<body>
   <!--导航-->
   <ol id="ol">
       <li class="current">1</li>
       <li>2</li>
       <li>3</li>
       <li>4</li>
       <li>5</li>
   </ol>
   <!--楼层-->
   <ul id="ul">
       <li>1层内容</li>
       <li>2层内容</li>
       <li>3层内容</li>
       <li>4层内容</li>
       <li>5层内容</li>
   </ul>

<script src="../../00MyTools/MyTools.js"></script>
<script>
    window.addEventListener('load', function (ev) {
         // 1. 获取标签
        var ol = myTool.$('ol'), ul = myTool.$('ul');
        var ulLis = ul.children;
        var olLis = ol.children;

        // 是否是点击产生的滚动
        var isClick = false;

        // 2. 上色
        var colorArr = ['red', 'green', 'blue', 'purple', 'yellow'];
        for (var i = 0; i < colorArr.length; i++) {
            ulLis[i].style.backgroundColor = colorArr[i];
        }

        // 3. 监听导航点击
        for (var j = 0; j < olLis.length; j++) {
            var olLi = olLis[j];
            (function (index) {
                olLi.addEventListener('click', function () {
                    isClick = true;
                    for (var i = 0; i < olLis.length; i++) {
                        olLis[i].className = '';
                    }
                    this.className = 'current';
                    // document.documentElement.scrollTop = index * myTool.client().height;

                    myTool.slowMoving(document.documentElement, {'scrollTop': index * myTool.client().height}, function () {
                        isClick = false;
                    });
                });
            })(j)
        }

        // 4. 监听滚动
        var roll = 0;
        window.addEventListener('scroll', function (ev1) {
            if(!isClick){
                // 4.1 获取头部滚动偏移的高度
                roll = Math.ceil(Number(myTool.scroll().top));

                // 4.2 遍历
                for (var i = 0; i < ulLis.length; i++) {
                    // 4.3 判断
                    if(roll >= ulLis[i].offsetTop){
                        for (var j = 0; j < olLis.length; j++) {
                            olLis[j].className = '';
                        }
                        olLis[i].className = 'current';
                    }
                }
            }
        })
    });
</script>
</body>
</html>
相关标签: # JS特效