JavaScript制作楼层导航效果流程详解

目录
  • 本期目标
  • 1. 功能实现
    • 1.1 结构层
    • 1.2 样式层
    • 1.3 行为层
      • 1.3.1 楼层跳转
      • 1.3.2 楼层监听
  • 2. 效果预览
  • 3. 项目代码

本期目标

使用JavaScript制作楼层导航效果,实现两个功能:

  • 楼层跳转
  • 楼层监听

1. 功能实现

1.1 结构层

<div id="box" class="box">
    <ul class="list">
        <li class="content-part" data-n="栏目一">栏目一</li>
        <li class="content-part" data-n="栏目二">栏目二</li>
        <li class="content-part" data-n="栏目三">栏目三</li>
        <li class="content-part" data-n="栏目四">栏目四</li>
        <li class="content-part" data-n="栏目五">栏目五</li>
    </ul>
</div>
<div class="left">
    <ul id="left-list">
        <li data-n="栏目一">栏目一</li>
        <li data-n="栏目二">栏目二</li>
        <li data-n="栏目三">栏目三</li>
        <li data-n="栏目四">栏目四</li>
        <li data-n="栏目五">栏目五</li>
    </ul>
</div>

1.2 样式层

<style>
    * {
        margin: 0;
        padding: 0;
    }
    body .box {
        width: 1200px;
    }
    body .box {
        margin: 0 auto;
    }
    ul {
        list-style: none;
    }
    body .box ul li {
        height: 800px;
        background-color: silver;
        margin-bottom: 20px;
        font-size: 30px;
        font-weight: bold;
    }
    body .left {
        position: fixed;
        left: 20px;
        bottom: 100px;
        width: 100px;
        height: 250px;
        top: 50%;
        margin-top: -125px;
        background-color: silver;
    }
    body .left ul li {
        height: 50px;
        line-height: 50px;
        text-align: center;
        cursor: pointer;
    }
    body .current {
        color: #fff;
        background-color: tomato;
    }
</style>

1.3 行为层

1.3.1 楼层跳转

点击左侧菜单中的楼层按钮对应跳转到相应的楼层。

var oList = document.getElementById('left-list');
// 点击事件委托
oList.onclick = function (e) {
    if (e.target.tagName.toLowerCase() == 'li') {
        // 取data-n值
        var n = e.target.getAttribute('data-n');
        // []属性选择器
        var contentPart = document.querySelector('.content-part[data-n=' + n + ']');
        // 设置卷动
        document.documentElement.scrollTop = contentPart.offsetTop;
    }
}

1.3.2 楼层监听

楼层监听,页面卷动时,左侧菜单中的楼层栏目背景随之变化。

// 页面卷动时,左侧盒子栏目背景随之变化
var contents = document.querySelectorAll('.content-part');
var lis = document.querySelectorAll('#left-list li');
var offsetTopArr = [];
for (var i = 0; i < contents.length; i++) {
    offsetTopArr.push(contents[i].offsetTop);
}
// 为了方便比较,追加无穷大
offsetTopArr.push(Infinity);
// 监听卷动
var nowFloor = -1;
window.onscroll = function (e) {
    var nowScrollTop = document.documentElement.scrollTop;
    // break的i值即为盒子数组下标
    for (var i = 0; i < offsetTopArr.length; i++) {
        if (nowScrollTop >= offsetTopArr[i] && nowScrollTop < offsetTopArr[i + 1]) {
            break;
        }
    }
    // 楼层不等,进行样式更改
    if (nowFloor != i) {
        nowFloor = i;
        for (var j = 0; j < lis.length; j++) {
            if (j == i) {
                // 当前楼层添加样式
                lis[j].className = 'current';
            } else {
                // 去掉其他楼层的样式
                lis[j].className = '';
            }
        }
    }
}

2. 效果预览

3. 项目代码

点击前往代码仓库,查看完整代码。

到此这篇关于JavaScript制作楼层导航效果流程详解的文章就介绍到这了,更多相关JavaScript 楼层导航内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • js实现楼层导航功能

    图如下所示: 1.点击跳转到相应区域: 页面scroll掉的距离 = 目标板块在文档中的垂直坐标 - 起始板块(目标位置)到视图顶部的距离: document.body.scrollTop = scrollLength; document.documentElement.scrollTop = scrollLength; 2.滚动滚动条时对应的导航链接被激活 每个板块的导航链接对应一个长度区间,当滚动条滚动调的长度落在该区间时,该导航条则被选中.区间范围为当前板块的scrollTop值(包含)~

  • JS实现网站楼层导航效果代码实例

    壹 ❀ 引言 对于楼层导航而言,还有个重要的功能就是,随着滚动条滚动,达到某层时得同步点亮楼层导航的小图片. 由于我前面也说了不打算使用JQ,所以想着用JS去实现它,实现并不难,主要得弄清滚动满足怎样的条件才应该点亮对应楼层,我们先看看实现效果: 贰 ❀ 实现思路 第一点,因为是由滚动触发的楼层判断,所以肯定离不开onscroll事件. 第二点,我们貌似要获取每个楼层顶端距离视窗顶部的距离,随着滚动条往下滚动,此距离会不断缩小,当接近到某个距离时我们判定此楼层入画,当然其它楼层都满足此判定. 而

  • JavaScript制作楼层导航效果流程详解

    目录 本期目标 1. 功能实现 1.1 结构层 1.2 样式层 1.3 行为层 1.3.1 楼层跳转 1.3.2 楼层监听 2. 效果预览 3. 项目代码 本期目标 使用JavaScript制作楼层导航效果,实现两个功能: 楼层跳转 楼层监听 1. 功能实现 1.1 结构层 <div id="box" class="box"> <ul class="list"> <li class="content-par

  • C++使用easyX库实现三星环绕效果流程详解

    目录 1,项目描述 2,解决思路 3,关键代码 4,项目运行截图 5,具体代码实现 1,项目描述 功能1:使用图形化的方式描述地球围绕着太阳转动,月球围绕着地球转动 功能2:在转动的过程中当用户按下1,2,3,4,5,6,7时它可以变换出7种不同的颜色,当用户按下8时它可以变换从1-7的颜色依次变换当用户再次按下8键时停止变换颜色 功能3:当用户按下上键时,地球会围绕太阳反转,当再次按下上键时地球会恢复到正转 功能4:当用户按下空格键的时候,所有动画暂停,当再次按下空格键的时候所有动画继续进行.

  • React实现卡片拖拽效果流程详解

    前提摘要: 学习宋一玮 React 新版本 + 函数组件 &Hooks 优先 开篇就是函数组件+Hooks 实现的效果如下: 学到第11篇了 照葫芦画瓢,不过老师在讲解的过程中没有考虑拖拽目标项边界问题,我稍微处理了下这样就实现拖拽流畅了 下面就是主要的代码了,实现拖拽(src/App.js): 核心在于标记当前项,来源项,目标项,并且在拖拽完成时对数据处理,更新每一组数据(useState): /** @jsxImportSource @emotion/react */ // 上面代码是使用e

  • Java代码生成器的制作流程详解

    1. 前言 前几天写了篇关于Mybatis Plus代码生成器的文章,不少同学私下问我这个代码生成器是如何运作的,为什么要用到一些模板引擎,所以今天来说明下代码生成器的流程. 2. 代码生成器的使用场景 我们在编码中存在很多样板代码,格式较为固定,结构随着项目的迭代也比较稳定,而且数量巨大,这种代码写多了也没有什么技术含量,在这种情况下代码生成器可以有效提高我们的效率,其它情况并不适于使用代码生成器. 3. 代码生成器的制作流程 首先我们要制作模板,把样板代码的固定格式抽出来.然后把动态属性绑定

  • JavaScript实现Promise流程详解

    目录 构造函数 then 和 catch方法 解决异步问题 all和race方法 构造函数 首先我们来看一下我们是如何使用promise的,我们在实例化对象是这么使用的: let p1 = new Promise((resolve, reject) => { let random = Math.floor(Math.random() * 10); if (random > 4) { resolve('sucess') } else { reject('erro') } }) 所以我们在创建我们

  • BootStrap的JS插件之轮播效果案例详解

    Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的. 案例 下面展示的就是此插件和相关组件制作的轮播案例. <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> <!-- Indicators --> <ol class

  • Bootstrap与KnockoutJs相结合实现分页效果实例详解

    KnockoutJS是一个JavaScript实现的MVVM框架.非常棒.比如列表数据项增减后,不需要重新刷新整个控件片段或自己写JS增删节点,只要预先定义模板和符合其语法定义的属性即可.简单的说,我们只需要关注数据的存取. 一.引言 由于最近公司的系统需要改版,改版的新系统我打算使用KnockoutJs来制作Web前端.在做的过程中,遇到一个问题--如何使用KnockoutJs来完成分页的功能.在前一篇文章中并没有介绍使用KnockoutJs来实现分页,所以在这篇文章中,将补充用Knockou

  • JavaScript中浅讲ajax图文详解

    1.ajax入门案例 1.1 搭建Web环境 ajax对于各位来说,应该都不陌生,正因为ajax的产生,导致前台页面和服务器之间的数据传输变得非常容易,同时还可以实现页面的局部刷新.通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新. 对于JavaWeb项目而言,ajax主要用于浏览器和服务器之间数据的传输. 如果是单单地堆砌知识点,会显得比较无聊,那么根据惯例,我先不继续介绍ajax,而是来写一个案例吧. 打开

  • 实现JavaScript的组成----BOM和DOM详解

    我们知道,一个完整的JavaScript的实现,需要由三部分组成:ECMAScript(核心),BOM(浏览器对象模型),DOM(文档对象模型). 今天主要学习BOM和DOM. BOM: BOM提供了很多对象,用来访问浏览器的功能,这些功能于网页内容无关(这些是DOM的事),目前,BOM已经被W3C搬入了HTML5规范中. window对象: BOM的core,表示浏览器的一个实例,它既是通过javascript访问浏览器窗口的一个接口,又是ECMAScript规定的Global对象,这意味着在

  • 使用JavaScript开发跨平台的桌面应用详解

    任何可以使用JavaScript来编写的应用,最终会由JavaScript编写.--Atwood定律 Atwood's Law是Jeff Atwood在2007年提出的:"any application that can be written in JavaScript, will eventually be written in JavaScript.".据说,这只是当时开的一个玩笑.不过,这个玩笑似乎渐渐变成了现实.从各种华丽的网页框架,到功能强大的库,到了现在的机器学习,服务器开

随机推荐