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 相关文章推荐
extjs 学习笔记(二) Ext.Element类
Oct 13 Javascript
js中cookie的添加、取值、删除示例代码
Oct 21 Javascript
js实现的复制兼容chrome和IE
Apr 03 Javascript
JavaScript fontsize方法入门实例(按照指定的尺寸来显示字符串)
Oct 17 Javascript
jQuery中:last-child选择器用法实例
Dec 31 Javascript
举例详解JavaScript中Promise的使用
Jun 24 Javascript
js实现获取div坐标的方法
Nov 16 Javascript
VueJS如何引入css或者less文件的一些坑
Apr 25 Javascript
使用Node.js实现简易MVC框架的方法
Aug 07 Javascript
详解vue-cli 构建项目 vue-cli请求后台接口 vue-cli使用axios、sass、swiper
May 28 Javascript
微信小程序引入Vant组件库过程解析
Aug 06 Javascript
VUE异步更新DOM - 用$nextTick解决DOM视图的问题
Nov 06 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自动跳转中英文页面
2008/07/29 PHP
php 购物车的例子
2009/05/04 PHP
ThinkPHP中自定义错误页面和提示页面实例
2014/11/22 PHP
PHP入门教程之面向对象的特性分析(继承,多态,接口,抽象类,抽象方法等)
2016/09/11 PHP
php自定义函数br2nl实现将html中br换行符转换为文本输入中换行符的方法【与函数nl2br功能相反】
2017/02/17 PHP
Yii1.1中通过Sql查询进行的分页操作方法
2017/03/16 PHP
javascript克隆对象深度介绍
2012/11/20 Javascript
js 文本滚动效果的实例代码
2013/08/17 Javascript
jquery动态添加删除一行数据示例
2014/06/12 Javascript
基于jquery和svg实现超炫酷的动画特效
2014/12/09 Javascript
javascript正则表达式之search()用法实例
2015/01/19 Javascript
jQuery实现商品活动倒计时
2015/10/16 Javascript
JavaScript实现的MD5算法完整实例
2016/02/02 Javascript
JavaScript“尽快失败”的原则实例详解
2016/10/08 Javascript
简易的JS计算器实现代码
2016/10/18 Javascript
ionic中列表项增加和删除的实现方法
2017/01/22 Javascript
基于HTML5+JS实现本地图片裁剪并上传功能
2017/03/24 Javascript
微信小程序使用video组件播放视频功能示例【附源码下载】
2017/12/08 Javascript
vue根据进入的路由进行原路返回的方法
2018/09/26 Javascript
解决ng-repeat产生的ng-model中取不到值的问题
2018/10/02 Javascript
Node.js API详解之 timer模块用法实例分析
2020/05/07 Javascript
浅谈Python中copy()方法的使用
2015/05/21 Python
Python根据成绩分析系统浅析
2019/02/11 Python
django做form表单的数据验证过程详解
2019/07/26 Python
基于Django统计博客文章阅读量
2019/10/29 Python
通过实例简单了解Python中yield的作用
2019/12/11 Python
Marriott国际:万豪国际酒店查询预订
2017/09/25 全球购物
美国家居装饰网上商店:Lulu & Georgia
2019/09/14 全球购物
产品生产计划书
2014/05/07 职场文书
媒体宣传策划方案
2014/05/25 职场文书
淘宝店策划方案
2014/06/07 职场文书
安全生产月宣传标语
2014/10/06 职场文书
董事长助理岗位职责
2015/02/11 职场文书
2015国庆节感想
2015/08/04 职场文书
2016年第十四个公民道德宣传日活动总
2016/04/01 职场文书
Go 中的空白标识符下划线
2022/03/25 Golang