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 相关文章推荐
javascript 变量作用域 代码分析
Jun 26 Javascript
jQuery中将函数赋值给变量的调用方法
Mar 23 Javascript
面向对象Javascript核心支持代码分享
May 23 Javascript
jQuery通过Ajax返回JSON数据
Apr 28 Javascript
angularjs学习笔记之简单介绍
Sep 26 Javascript
JavaScript高级教程5.6之基本包装类型(详细)
Nov 23 Javascript
JavaScript转换与解析JSON方法实例详解
Nov 24 Javascript
JS仿hao123导航页面图片轮播效果
Sep 01 Javascript
详解vue中axios的使用与封装
Mar 20 Javascript
微信小程序云开发之使用云数据库
May 17 Javascript
微信小程序实现音频文件播放进度的实例代码
Mar 02 Javascript
使用js原生实现年份轮播选择效果实例
Jan 12 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
Yii数据库缓存实例分析
2016/03/29 PHP
PHP设计模式之抽象工厂模式实例分析
2019/03/25 PHP
QQ登录简单实现代码
2021/03/09 Javascript
通过JAVASCRIPT读取ASP设定的COOKIE
2007/02/15 Javascript
关于__defineGetter__ 和__defineSetter__的说明
2007/05/12 Javascript
用jQuery中的ajax分页实现代码
2011/09/20 Javascript
js控制鼠标事件移动及移出效果显示
2014/10/19 Javascript
js实现文本框只允许输入数字并限制数字大小的方法
2015/08/19 Javascript
深入理解JavaScript内置函数
2016/06/03 Javascript
js实现弹窗居中的简单实例
2016/10/09 Javascript
angular select 默认值设置方法
2017/06/23 Javascript
javascript算法之二叉搜索树的示例代码
2017/09/12 Javascript
javascrpt密码强度校验函数详解
2020/03/18 Javascript
原生js实现轮播图特效
2020/05/04 Javascript
[01:08:09]DOTA2上海特级锦标赛主赛事日 - 1 胜者组第一轮#1Liquid VS Alliance第二局
2016/03/02 DOTA
[44:10]2018DOTA2亚洲邀请赛 4.5 淘汰赛 EG vs VP 第一场
2018/04/06 DOTA
Python yield 小结和实例
2014/04/25 Python
python中reload(module)的用法示例详解
2017/09/15 Python
python抖音表白程序源代码
2019/04/07 Python
对python3.4 字符串转16进制的实例详解
2019/06/12 Python
scikit-learn线性回归,多元回归,多项式回归的实现
2019/08/29 Python
python GUI库图形界面开发之PyQt5切换按钮控件QPushButton详细使用方法与实例
2020/02/28 Python
解决pycharm安装第三方库失败的问题
2020/05/09 Python
python 基于wx实现音乐播放
2020/11/24 Python
迪卡侬英国官网:Decathlon英国
2017/04/08 全球购物
软件测试工程师结构化面试题库
2016/11/23 面试题
酒店保洁主管岗位职责
2013/11/28 职场文书
纪念建党演讲稿范文
2014/01/13 职场文书
小学生家长评语集锦
2014/01/30 职场文书
申请任职学生会干部自荐书范文
2014/02/13 职场文书
三分钟演讲稿范文
2014/04/24 职场文书
知识就是力量演讲稿
2014/09/13 职场文书
党员教师个人对照检查材料范文
2014/09/25 职场文书
出国签证在职证明范本
2014/11/24 职场文书
旅行社计调工作总结
2015/08/12 职场文书
修改MySQL的数据库引擎为INNODB的方法
2021/05/26 MySQL