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 相关文章推荐
经验几则 推荐
Sep 05 Javascript
Extjs学习笔记之一 初识Extjs之MessageBox
Jan 07 Javascript
在服务端(Page.Write)调用自定义的JS方法详解
Aug 09 Javascript
推荐 21 款优秀的高性能 Node.js 开发框架
Aug 18 Javascript
js获取当前时间显示在页面上并每秒刷新
Dec 24 Javascript
javascirpt实现2个iframe之间传值的方法
Jun 30 Javascript
javascript history对象详解
Feb 09 Javascript
Web前端框架Angular4.0.0 正式版发布
Mar 28 Javascript
Three.js实现浏览器变动时进行自适应的方法
Sep 26 Javascript
vue.js轮播图组件使用方法详解
Jul 03 Javascript
Angular请求防抖处理第一次请求失效问题
May 17 Javascript
Vue执行方法,方法获取data值,设置data值,方法传值操作
Aug 05 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水印技术
2007/02/14 PHP
PHP错误Warning: Cannot modify header information - headers already sent by解决方法
2014/09/27 PHP
PHP dirname功能及原理实例解析
2020/10/28 PHP
javascript 获取select下拉列表值的代码
2009/09/07 Javascript
Jsonp 跨域的原理以及Jquery的解决方案
2011/06/27 Javascript
jquery实现当滑动到一定位置时固定效果
2014/06/17 Javascript
JavaScript控制table某列不显示的方法
2015/03/16 Javascript
Bootstrap 3.x打印预览背景色与文字显示异常的解决
2016/11/06 Javascript
AngularJS路由切换实现方法分析
2017/03/17 Javascript
关于vue-resource报错450的解决方案
2017/07/24 Javascript
基于ajax和jsonp的原生封装(实例)
2017/10/16 Javascript
Webpack 之 babel-loader文件预处理器详解
2018/03/23 Javascript
vue项目打包部署到服务器的方法示例
2018/08/27 Javascript
微信小程序实现原生步骤条
2019/07/25 Javascript
easyUI 实现的后台分页与前台显示功能示例
2020/06/01 Javascript
[13:55]Newbee vs Team Spirit
2018/06/07 DOTA
跟老齐学Python之玩转字符串(3)
2014/09/14 Python
Python如何判断数独是否合法
2016/09/08 Python
详解Python各大聊天系统的屏蔽脏话功能原理
2016/12/01 Python
Python贪心算法实例小结
2018/04/22 Python
python内存监控工具memory_profiler和guppy的用法详解
2019/07/29 Python
python 进程的几种创建方式详解
2019/08/29 Python
浅谈tensorflow中张量的提取值和赋值
2020/01/19 Python
Python变量作用域LEGB用法解析
2020/02/04 Python
django有哪些好处和优点
2020/09/01 Python
解决PyCharm IDE环境下,执行unittest不生成测试报告的问题
2020/09/03 Python
使用CSS3的ruby-position固定注音位置的用法示例
2016/07/05 HTML / CSS
使用phonegap播放音频的实现方法
2017/03/31 HTML / CSS
what is the difference between ext2 and ext3
2013/11/03 面试题
人事主管的岗位职责
2013/11/16 职场文书
2014年大学生四年规划书范文
2014/04/03 职场文书
银行行长竞聘演讲稿
2014/04/23 职场文书
小学生我的梦想演讲稿
2014/08/21 职场文书
社区青年志愿者活动总结
2015/05/06 职场文书
如何在C++中调用Python
2021/05/21 Python
Redis唯一ID生成器的实现
2022/07/07 Redis