编程 Javascript

JS实现导航栏楼层特效

Posted in Javascript onJanuary 01, 2020

本文实例为大家分享了JS实现导航栏楼层的具体代码，供大家参考，具体内容如下

知识点

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

运行效果

导航与界面实现互动

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实现导航栏楼层特效

- Author -

KaiSarH

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

基于jquery的loading 加载提示效果实现代码

Sep 01 Javascript

Prototype源码浅析 String部分(二)

Jan 16 Javascript

javascript关于继承解析

May 10 Javascript

关于backbone url请求中参数带有中文存入数据库是乱码的快速解决办法

Jun 13 Javascript

wap手机端解决返回上一页的js实例

Dec 08 Javascript

Javascript 对cookie操作详解及实例

Dec 29 Javascript

基于JavaScript实现带缩略图的轮播效果

Jan 12 Javascript

微信小程序中页面FOR循环和嵌套循环

Jun 21 Javascript

laravel5.4+vue+element简单搭建的示例代码

Aug 29 Javascript

Vue2 模板template的四种写法总结

Feb 23 Javascript

Node.js如何优雅的封装一个实用函数的npm包的方法

Apr 29 Javascript

微信浏览器左上角返回按钮监听的实现

Mar 04 Javascript

JS实现旋转木马轮播图

Jan 01 #Javascript

JS实现普通轮播图特效

Jan 01 #Javascript

javascript实现超好看的3D烟花特效

Jan 01 #Javascript

JavaScript工具库MyTools详解

Jan 01 #Javascript

javascript Canvas动态粒子连线

Jan 01 #Javascript

小程序新版订阅消息模板消息

Dec 31 #Javascript

小程序实现长按保存图片的方法

Dec 31 #Javascript