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 相关文章推荐
制作特殊字的脚本
Jun 26 Javascript
判断iframe是否加载完成的完美方法
Jan 07 Javascript
jQuery图片的展开和收缩实现代码
Apr 16 Javascript
js delete 用法(删除对象属性及变量)
Aug 24 Javascript
深入理解javascript严格模式(Strict Mode)
Nov 28 Javascript
推荐阅读的js快速判断IE浏览器(兼容IE10与IE11)
Dec 13 Javascript
jQuery禁用键盘后退屏蔽F5刷新及禁用右键单击
Jan 22 Javascript
JS把内容动态插入到DIV的实现方法
Jul 19 Javascript
AngularJS 过滤与排序详解及实例代码
Sep 14 Javascript
JS实现异步上传压缩图片
Apr 22 Javascript
Vue Element使用icon图标教程详解(第三方)
Feb 07 Javascript
VUE table表格动态添加一列数据,新增的这些数据不可以编辑(v-model绑定的数据不能实时更新)
Apr 03 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
javascript中强制执行toString()具体实现
2013/04/27 Javascript
js运动框架_包括图片的淡入淡出效果
2013/05/11 Javascript
javascript创建数组之联合数组的使用方法示例
2013/12/26 Javascript
浅析Node.js查找字符串功能
2014/09/03 Javascript
jQuery实现长按按钮触发事件的方法
2015/02/02 Javascript
JavaScript 对象深入学习总结(经典)
2015/09/29 Javascript
jQuery实现最简单实用的分秒倒计时
2017/02/05 Javascript
webpack入门+react环境配置
2017/02/08 Javascript
JS二叉树的简单实现方法示例
2017/04/05 Javascript
jquery实现图片放大点击切换
2017/06/06 jQuery
详解react-router如何实现按需加载
2017/06/15 Javascript
webpack构建react多页面应用详解
2017/09/15 Javascript
浅谈Angular HttpClient简单入门
2018/05/04 Javascript
Vue中父子组件通讯之todolist组件功能开发
2018/05/21 Javascript
JavaScript交换两个变量方法实例
2019/11/25 Javascript
js实现tab栏切换效果
2020/08/02 Javascript
如何利用JS将手机号中间四位变成*号
2020/09/29 Javascript
[48:52]DOTA2上海特级锦标赛A组小组赛#2 Secret VS CDEC第一局
2016/02/25 DOTA
python脚本设置系统时间的两种方法
2016/02/21 Python
使用Python编写基于DHT协议的BT资源爬虫
2016/03/19 Python
浅述python中argsort()函数的实例用法
2017/03/30 Python
Python3一行代码实现图片文字识别的示例
2018/01/15 Python
python 读写文件,按行修改文件的方法
2018/07/12 Python
python 3.6.4 安装配置方法图文教程
2018/09/18 Python
python 定时器,轮询定时器的实例
2019/02/20 Python
Python字符串的一些操作方法总结
2019/06/10 Python
pandas实现将日期转换成timestamp
2019/12/07 Python
Python 数据的累加与统计的示例代码
2020/08/03 Python
纯CSS3实现带动画效果导航菜单无需js
2013/09/27 HTML / CSS
Funko官方商店:源自美国,畅销全球搪胶收藏玩偶
2018/09/15 全球购物
应届大学生求职的自我评价
2013/11/17 职场文书
文秘人员工作职责
2014/01/31 职场文书
40岁生日感言
2014/02/15 职场文书
建立共青团委员会的请示
2019/04/02 职场文书
MySQL之DML语言
2021/04/05 MySQL
JavaScript实现酷炫的鼠标拖尾特效
2022/02/18 Javascript