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 相关文章推荐
js 火狐下取本地路径实现思路
Apr 02 Javascript
js判断undefined变量类型使用typeof
Jun 03 Javascript
JS定义网页表单提交(submit)的方法
Mar 20 Javascript
Bootstrap精简教程
Nov 27 Javascript
浅谈js里面的InttoStr和StrtoInt
Jun 14 Javascript
JS实现的自定义显示加载等待图片插件(loading.gif)
Jun 17 Javascript
vue-router2.0 组件之间传参及获取动态参数的方法
Nov 10 Javascript
Vue封装的可编辑表格插件方法
Aug 28 Javascript
vue-cli history模式实现tomcat部署报404的解决方式
Sep 06 Javascript
Layer UI表格列日期格式化及取消自动填充日期的实现方法
May 10 Javascript
javascript利用canvas实现鼠标拖拽功能
Jul 23 Javascript
Vue使用v-viewer实现图片预览
Oct 21 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
PHP截取中文字符串的问题
2006/07/12 PHP
PHP删除数组中空值的方法介绍
2014/04/14 PHP
ThinkPHP之用户注册登录留言完整实例
2014/07/22 PHP
CI框架教程之优化验证码机制详解【验证码辅助函数】
2019/04/16 PHP
php 中self,this的区别和操作方法实例分析
2019/11/04 PHP
DWZ table的原生分页浅谈
2013/03/01 Javascript
jquery使用append(content)方法注意事项分享
2014/01/06 Javascript
JavaScript判断变量是对象还是数组的方法
2014/08/28 Javascript
jQuery each函数源码分析
2016/05/25 Javascript
JavaScript 详解预编译原理
2017/01/22 Javascript
关于jQuery EasyUI 中刷新Tab选项卡后一个页面变形的解决方法
2017/03/02 Javascript
Node学习记录之cluster模块
2017/05/31 Javascript
vue 的keep-alive缓存功能的实现
2018/03/22 Javascript
解决Vue.js父组件$on无法监听子组件$emit触发事件的问题
2018/09/12 Javascript
微信小程序实现简单表格
2019/02/14 Javascript
微信小程序实现Session功能及无法获取session问题的解决方法
2019/05/07 Javascript
[05:29]2014DOTA2国际邀请赛 赛后专访:LGDNewbee顺利过关
2014/07/13 DOTA
python模块smtplib学习
2018/05/22 Python
Pandas删除数据的几种情况(小结)
2019/06/21 Python
浅谈matplotlib中FigureCanvasXAgg的用法
2020/06/16 Python
python单元测试框架pytest的使用示例
2020/10/07 Python
Python 按比例获取样本数据或执行任务的实现代码
2020/12/03 Python
乌克兰网上服装店:Bolf.ua
2018/10/30 全球购物
俄罗斯最大的香水和化妆品网上商店:Randewoo
2020/11/05 全球购物
毕业生多媒体设计求职信
2013/10/12 职场文书
物理教师自荐信范文
2013/12/28 职场文书
作弊检讨书1000字
2014/02/01 职场文书
项目安全员岗位职责
2015/02/15 职场文书
小学班主任个人总结
2015/03/03 职场文书
工程服务质量承诺书
2015/04/29 职场文书
责任书范本大全
2015/05/11 职场文书
微信早安问候语
2015/11/10 职场文书
MySQL基础(一)
2021/04/05 MySQL
MySQL悲观锁与乐观锁的实现方案
2021/11/02 MySQL
HDFS免重启挂载新磁盘
2022/04/06 Servers
SQL bool盲注和时间盲注详解
2022/07/23 SQL Server