JS实现导航栏楼层特效


Posted in Javascript onJanuary 01, 2020

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

知识点

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

运行效果

导航与界面实现互动

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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery 动画基础教程
Dec 25 Javascript
Javascript remove 自定义数组删除方法
Oct 20 Javascript
理解Javascript_02_理解undefined和null
Oct 11 Javascript
JavaScript中SetInterval与setTimeout的用法详解
Nov 10 Javascript
浅谈js图片前端预览之filereader和window.URL.createObjectURL
Jun 30 Javascript
jQuery实现选中行变色效果(实例讲解)
Jul 06 jQuery
详解vue 模版组件的三种用法
Jul 21 Javascript
为vue-router懒加载时下载js的过程中添加loading提示避免无响应问题
Apr 03 Javascript
webpack4简单入门实例
Sep 06 Javascript
react同构实践之实现自己的同构模板
Mar 13 Javascript
vue elementUI使用tabs与导航栏联动
Jun 21 Javascript
微信小程序吸底区域适配iPhoneX的实现
Apr 09 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
You might like
自适应图片大小的弹出窗口
2006/07/27 Javascript
javascript 读取图片文件的大小
2009/06/25 Javascript
javascript两段代码,两个小技巧
2010/02/04 Javascript
某页码显示的helper 少量调整,另附js版
2010/09/12 Javascript
jquery 表单验证之通过 class验证表单不为空
2015/11/02 Javascript
基于Javascript实现二级联动菜单效果
2016/03/04 Javascript
jQuery遍历json的方法(推荐)
2016/06/12 Javascript
详解使用fetch发送post请求时的参数处理
2017/04/05 Javascript
JavaScript之事件委托实例(附原生js和jQuery代码)
2017/07/22 jQuery
详解vue-property-decorator使用手册
2019/07/29 Javascript
用原生JS实现爱奇艺首页导航栏代码实例
2019/09/19 Javascript
小程序调用微信支付的方法
2019/09/26 Javascript
40行代码把Vue3的响应式集成进React做状态管理
2020/05/20 Javascript
three.js 制作动态二维码的示例代码
2020/07/31 Javascript
Python简单生成随机姓名的方法示例
2017/12/27 Python
使用apidocJs快速生成在线文档的实例讲解
2018/02/07 Python
在Pycharm中使用GitHub的方法步骤
2019/06/13 Python
用scikit-learn和pandas学习线性回归的方法
2019/06/21 Python
用Python从0开始实现一个中文拼音输入法的思路详解
2019/07/20 Python
Python对接六大主流数据库(只需三步)
2019/07/31 Python
Python中zip()函数的简单用法举例
2019/09/02 Python
Python参数传递对象的引用原理解析
2020/05/22 Python
Python小白不正确的使用类变量实例
2020/05/29 Python
python实现画图工具
2020/08/27 Python
Fanatics法国官网:美国体育电商
2019/08/27 全球购物
Viking比利时:购买办公用品
2019/10/30 全球购物
Eton丹麦官网:精美的男式衬衫
2020/05/27 全球购物
一句话工作感言
2014/03/01 职场文书
终止劳动合同协议书
2014/10/05 职场文书
财务经理岗位职责范本
2015/04/08 职场文书
关于倡议书的范文
2015/04/29 职场文书
科技活动总结范文
2015/05/11 职场文书
vue中data改变后让视图同步更新的方法
2021/03/29 Vue.js
Mysql中调试存储过程最简单的方法
2021/06/30 MySQL
MySQL非空约束(not null)案例讲解
2021/08/23 MySQL
Python中递归以及递归遍历目录详解
2021/10/24 Python