jQuery实现电梯导航案例详解(切换网页区域)

2024-08-18 16:08:43

前言：

日常生活中用手机，电脑浏览网页时，滑到了页面下端后想返回顶部或跳转到页面别的版块，用鼠标滚动很麻烦，网页电梯导航 就可以很方便的精准到达目标版块。

一：效果展示

【gif 动图演示】格式转换有些不清晰请谅解！功能实现包含以下：

点击电梯导航切换到对应板块
移动光标导航栏对应板块跟着移动

二：实现原理剖析

重点来啦！！！

2.1 网页结构：

结构上分了两部分，一部分是网页版块 banner-box，另一部分是网页导航版块 map-box，用了固定定位定在了右侧，打开页面是不显示的，要滚动至第三个版块后才会显示导航

<div class="banner-box">
        <div class="banner1">版 块 一</div>
        <div class="banner2">版 块 二</div>
        <div class="banner3">版 块 三</div>
        <div class="banner4">版 块 四</div>
        <div class="banner5">版 块 五</div>
        <div class="banner6">版 块 六</div>
        <div class="banner7">版 块 七</div>
        <div class="banner8">版 块 八</div>
        <div class="banner9">版 块 九</div>
    </div>
    <div class="map-box">
        <ul>
           <li class="map">版块1</li>
           <li class="map">版块2</li>
           <li class="map">版块3</li>
           <li class="map">版块4</li>
           <li class="map">版块5</li>
           <li class="map">版块6</li>
           <li class="map">版块7</li>
           <li class="map">版块8</li>
           <li class="map">版块9</li>
        </ul>
    </div>

2.2 显示隐藏函数实现分析：

此块显示隐藏的代码封装在了一个单独的函数内，这是为了解决一个 bug 而方便调用，当代码移动到第三个板块往后时，刷新页面，此时虽然页面在第三个版块后，但是导航缺没有显示，这就需要单独写个函数方便调用 ----- 打开页面就调用一次

所需知识点：scrollTop()，offset().top
思路分析：利用 offset().top 获取到第三个版块到页面顶部的距离，然后使用scrollTop() 获取到页面卷上去的距离，判断是否大于这个距离，大于就使用 fadein 淡入，否则就使用 fadeout 淡出

function block_hide(){
             var three_top=$('.banner3').offset().top;
              if($(document).scrollTop()>=three_top){
                 $('.map-box').fadeIn(700)
              }else{
                 $('.map-box').fadeOut(700)
              }
           }

2.3 点击导航滚至对应板块实现分析：

此版块实现的是点击导航滚动到对应模块的实现，代码中标记互斥锁的地方先忽略，这是为了解决一些小 bug，互斥锁在后面的分析中提及。

所需知识点：animate()，offset().top
思路分析：点击后，排他思想，自己变色（添加了变化类current）兄弟不变色，使用 index() 方法获取到点击的导航的索引值，再将此索引值匹配到对应的版块上，得到其版块的到页面顶部的距离，执行动画函数 animate 使页面上卷这段距离即可

$('.map').click(function(){
             flag=false;    //互斥锁节流阀
              $(this).siblings().removeClass('current')
              $(this).addClass('current')
               var index=$(this).index();
               distance=$('.banner-box').children().eq(index).offset().top+2;
              //  console.log(distance)
              $('html').stop().animate({
                'scrollTop':distance
              },1000,'swing',function(){
                  flag=true;    //互斥锁节流阀
              })
           })

2.4 页面滚动导航对应选择实现分析：

此版块解释如何滚动网页至对应板块，让导航也跟着选择，一样的是互斥锁标记先忽略

重难点！！！

所需知识点：each()
思路分析：我们使用 each() 遍历得到每一个版块的索引 i 和其对应版块 ele，如果页面卷上去的距离大于等于我们每一个遍历得到的版块元素的上边界到页面顶部的值，那么就说明当前页面滚动到了这个版块，此时如果输出i的话，若当前在第四个版块，则输出结果为 0,1,2,3，这是因为滚动后会从索引0开始遍历，直到遍历到判断语句不成立为止，但最后一个输出的 i 一定是当前版块对应的 i，我们使用 eq 方法匹配到 i 索引下的导航按钮，使其变色选中，再把兄弟导航不选中即可实现

 $(window).scroll(function(){
              block_hide();
              if(flag==true){
                 $('.banner-box').children().each(function(i,ele){
                    if($(document).scrollTop() >= $(ele).offset().top){
                    console.log(i);
                    $('.map').eq(i).addClass('current').siblings().removeClass('current');
                 }
                })
              }
           })

2.5 互斥锁实现分析：

互斥锁是为了解决一个 bug，我们如果不写互斥锁，点击导航后，导航内的选择变色会把导航内的所有按钮都选一次再点到我们目标点的按钮，像抽风了一样

原因：就是点击导航按钮后页面滚动，页面滚动就会触发滚动事件，就会在滚动途中把导航按钮选择一通再到目标按钮

解决方法：综合以上标记有互斥锁的代码我们可以发现，设置了一个 flag 变量初始为 true，只有 flag 为 true 才能滚动改变导航，但是一旦点击导航，flag 就会变为 false，滚动切换导航便失效，从而达到目的，最后在点击事件的动画函数里添加回调函数，在点击后将 flag 再赋值为 true 即可再次滚动改变导航

三：完整代码

又到了大家最喜欢的源码环节！！！

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./jquery.js"></script>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    .banner-box{
      box-sizing: border-box;
       width: 1430px;
       height: 3650px;
       background-color: rgb(169, 169, 169);
       padding: 15px;
    }
    .banner1{
      box-sizing: border-box;
      width: 1390px;
      height: 380px;
      background-color: rgb(167, 220, 255);
      margin-bottom: 20px;
      font-size: 60px;
      font-weight: bold;
      line-height: 375px;
      text-align: center;
      color: rgb(255, 255, 255);
      text-shadow: 3px 3px 3px rgb(82, 82, 82);
    }
    .banner2{
      box-sizing: border-box;
      width: 1390px;
      height: 380px;
      background-color: rgb(255, 213, 213);
      margin-bottom: 20px;
      font-size: 60px;
      font-weight: bold;
      line-height: 375px;
      text-align: center;
      color: rgb(255, 255, 255);
      text-shadow: 3px 3px 3px rgb(82, 82, 82);
    }
    .banner3{
      box-sizing: border-box;
      width: 1390px;
      height: 380px;
      background-color: rgb(207, 182, 255);
      margin-bottom: 20px;
      font-size: 60px;
      font-weight: bold;
      line-height: 375px;
      text-align: center;
      color: rgb(255, 255, 255);
      text-shadow: 3px 3px 3px rgb(82, 82, 82);
    }
    .banner4{
      box-sizing: border-box;
      width: 1390px;
      height: 380px;
      background-color: rgb(255, 233, 195);
      margin-bottom: 20px;
      font-size: 60px;
      font-weight: bold;
      line-height: 375px;
      text-align: center;
      color: rgb(255, 255, 255);
      text-shadow: 3px 3px 3px rgb(82, 82, 82);
    }
    .banner5{
      box-sizing: border-box;
      width: 1390px;
      height: 380px;
      background-color: rgb(171, 255, 255);
      margin-bottom: 20px;
      font-size: 60px;
      font-weight: bold;
      line-height: 375px;
      text-align: center;
      color: rgb(255, 255, 255);
      text-shadow: 3px 3px 3px rgb(82, 82, 82);
    }
    .banner6{
      box-sizing: border-box;
      width: 1390px;
      height: 380px;
      background-color: rgb(242, 255, 175);
      margin-bottom: 20px;
      font-size: 60px;
      font-weight: bold;
      line-height: 375px;
      text-align: center;
      color: rgb(255, 255, 255);
      text-shadow: 3px 3px 3px rgb(82, 82, 82);
    }
    .banner7{
      box-sizing: border-box;
      width: 1390px;
      height: 380px;
      background-color: rgb(255, 193, 233);
      margin-bottom: 20px;
      font-size: 60px;
      font-weight: bold;
      line-height: 375px;
      text-align: center;
      color: rgb(255, 255, 255);
      text-shadow: 3px 3px 3px rgb(82, 82, 82);
    }
    .banner8{
      box-sizing: border-box;
      width: 1390px;
      height: 380px;
      background-color: rgb(193, 212, 255);
      margin-bottom: 20px;
      font-size: 60px;
      font-weight: bold;
      line-height: 375px;
      text-align: center;
      color: rgb(255, 255, 255);
      text-shadow: 3px 3px 3px rgb(82, 82, 82);
    }
    .banner9{
      box-sizing: border-box;
      width: 1390px;
      height: 380px;
      background-color: rgb(255, 248, 193);
      margin-bottom: 20px;
      font-size: 60px;
      font-weight: bold;
      line-height: 375px;
      text-align: center;
      color: rgb(255, 255, 255);
      text-shadow: 3px 3px 3px rgb(82, 82, 82);
    }
    .map-box{
       position: fixed;
       right: 30px;
       top: 200px;
       box-sizing: border-box;
       width: 95px;
       height: 370px;
       display: none;
       /* background-color: #fff; */
    }
    .map{
      box-sizing: border-box;
       float: left;
       width: 93px;
       height: 41px;
       border-bottom: 1px solid rgb(147, 147, 147);
       border-left: 10px solid rgb(147, 147, 147);
       list-style: none;
       text-align: center;
       line-height: 40px;
       background-color: rgb(255, 246, 237);
       cursor: pointer;
       color:rgb(87, 87, 87) ;
       font-weight: bold;
       font-size: 14px;
    }
    .map:hover{
      color: rgb(56, 56, 56);
      /* background-color: rgb(255, 220, 173); */
      border-left:  10px solid rgb(255, 169, 31);
    }
    .current{
       background:rgb(255, 220, 173);
    }
  </style>
</head>
<body>
  <div class="banner-box">
        <div class="banner1">版 块 一</div>
        <div class="banner2">版 块 二</div>
        <div class="banner3">版 块 三</div>
        <div class="banner4">版 块 四</div>
        <div class="banner5">版 块 五</div>
        <div class="banner6">版 块 六</div>
        <div class="banner7">版 块 七</div>
        <div class="banner8">版 块 八</div>
        <div class="banner9">版 块 九</div>
    </div>
    <div class="map-box">
        <ul>
           <li class="map">版块1</li>
           <li class="map">版块2</li>
           <li class="map">版块3</li>
           <li class="map">版块4</li>
           <li class="map">版块5</li>
           <li class="map">版块6</li>
           <li class="map">版块7</li>
           <li class="map">版块8</li>
           <li class="map">版块9</li>
        </ul>
    </div>
  <script>
       document.addEventListener('DOMContentLoaded',function(){
            document.addEventListener('selectstart',function(event){
              event.preventDefault();
            })
            document.addEventListener('contextmenu',function(event){
              event.preventDefault();
            })
       })
      var flag=true;  //互斥锁节流阀
           block_hide();
           $(window).scroll(function(){
              block_hide();
              if(flag==true){
                 $('.banner-box').children().each(function(i,ele){
                    if($(document).scrollTop() >= $(ele).offset().top){
                    console.log(i);
                    $('.map').eq(i).addClass('current').siblings().removeClass('current');
                 }
                })
              }
           })
       function block_hide(){
             var three_top=$('.banner3').offset().top;
              if($(document).scrollTop()>=three_top){
                 $('.map-box').fadeIn(700)
              }else{
                 $('.map-box').fadeOut(700)
              }
           }
           $('.map').click(function(){
             flag=false;    //互斥锁节流阀
              $(this).siblings().removeClass('current')
              $(this).addClass('current')
               var index=$(this).index();
               distance=$('.banner-box').children().eq(index).offset().top+2;
              //  console.log(distance)
              $('html').stop().animate({
                'scrollTop':distance
              },1000,'swing',function(){
                  flag=true;    //互斥锁节流阀
              })
           })
  </script>
</body>
</html>

到此这篇关于jQuery实现电梯导航案例(切换网页区域)的文章就介绍到这了,更多相关jquery电梯导航案例内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

使用jquery库实现电梯导航效果

一般来说,一些大型的电商网站首页,页面内容很多,页面会很长,这时候大部分网站都选择使用电梯导航,使页面跳转到相应位置或者返回顶部. 下面使用jquery库来实现电梯导航基本思路电梯导航基本上就是使用元素距离页面头部的高度offsetTop和页面滚动的距离scrollTop来进行比较事项相应的效果. 1.页面滚动到相应的位置,实现电梯导航的显示与隐藏2.页面滚动到相应的位置,电梯导航的按钮添加或者移出相应的类3.点击电梯导航按钮,实现页面的滚动和为按钮添加或者移出相应的类4.点击顶部按钮,返回
JQuery实现电梯导航特效

本文分享一个基于JQuery实现的电梯导航效果,效果如下: 以下是代码实现: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>基于JQuery实现电梯导航特效</title> <style type="text/css"> *
jQuery实现电梯导航模块

本文实例为大家分享了jQuery实现电梯导航模块的具体代码,供大家参考,具体内容如下功能模块 1.当页面滚动到电器的模块, 显示电梯导航 2.点击电梯导航中的 li, 页面滚动到对应的内容区域 3.为当前点击的 li 添加 current 类 4.页面内容滚动到第几个区域, 左侧的电梯导航自动高亮对应的 li 5.为页面滚动设置节流阀(点击 li 时, 不进行第4步判断) html部分结构 <ul class="sidebar"> <li>手机模块</l
jQuery实现电梯导航案例详解(切换网页区域)

目录前言: 一:效果展示二:实现原理剖析 2.1 网页结构: 2.2 显示隐藏函数实现分析: 2.3 点击导航滚至对应板块实现分析: 2.4 页面滚动导航对应选择实现分析: 2.5 互斥锁实现分析: 三:完整代码前言: 日常生活中用手机,电脑浏览网页时,滑到了页面下端后想返回顶部或跳转到页面别的版块,用鼠标滚动很麻烦,网页电梯导航就可以很方便的精准到达目标版块. 一:效果展示 [gif 动图演示]格式转换有些不清晰请谅解!功能实现包含以下: 点击电梯导航切换到对应板块移动光标
jQuery筛选器children()案例详解(图文)

jQuery的选择包含两种,一种是选择器,一种是筛选器.筛选器是对选择器选定的jQuery对象做进一步选择. children()是一个筛选器,顾名思义就是筛选孩子,筛选那些符合条件的孩子. 完整的格式如下: 复制代码代码如下: .children(expr) 其中children是筛选器的名称,expr是表达式,所有选择器中的表达式都可以用在这,比如按标签名"div",按类名".class",按序号":first"等等,如果表达式为空,那么返
jQuery 跨域访问解决原理案例详解

浏览器端跨域访问一直是个问题,多数研发人员对待js的态度都是好了伤疤忘了疼,所以病发的时候,时不时地都要疼上一疼.记得很久以前使用iframe 加script domain 声明.yahoo js util 的方式解决二级域名跨域访问的问题. 时间过得好快,又被拉回js战场时, 跨域问题这个伤疤又开疼了.好在,有jQuery帮忙,跨域问题似乎没那么难缠了.这次也借此机会对跨域问题来给刨根问底,结合实际的开发项目,查阅了相关资料,算是解决了跨域问题...有必要记下来备忘, 跨域的安全限制都是指浏览
Android HorizontalScrollView滑动与ViewPager切换案例详解

layout布局 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:co
vue.js+boostrap项目实践(案例详解)

一.为什么要写这篇文章最近忙里偷闲学了一下vue.js,同时也复习了一下boostrap,发现这两种东西如果同时运用到一起,可以发挥很强大的作用,boostrap优雅的样式和丰富的组件使得页面开发变得更美观和更容易,同时vue.js又是可以绑定model和view(这个相当于MVC中的,M和V之间的关系),使得对数据变换的操作变得更加的简易,简化了很多的逻辑代码. 二.学习这篇文章需要具备的知识 1.需要有vue.js的知识 2.需要有一定的HTML.CSS.JavaScript的基础知识 3
BootStrap的JS插件之轮播效果案例详解

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

俗说好记性不如个烂笔头,下面是jquery中的ajax方法参数详解,这里整理了一些供大家参考. 1.url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. 2.type: 要求为String类型的参数,请求方式(post或get)默认为get.注意其他http请求方法,例如put和delete也可以使用,但仅部分浏览器支持. 3.timeout: 要求为Number类型的参数,设置请求超时时间(毫秒).此设置将覆盖$.ajaxSetup()方法的全局设置. 4.async:
Jquery基础之事件操作详解

事件是用户操作时页面或页面加载时引发的用来完成javascript和HTML之间的交互操作.常见的元素点击事件.鼠标事件.键盘输入事件等,较传Javascript 相比JQuery增加并扩展了基本的事件处理机制,极大的增强了事件处理的能力. 一.DOM加载事件页面加载完毕后浏览器会通过javascript为Dom元素加载事件,使用Javascript时候使用的是window.onload方法,而Jquery使用的是$(document).ready()方法,下表展示两个事件的异同. wind
我用Python抓取了7000 多本电子书案例详解

安装安装很简单,只要执行: pip install requests-html 就可以了. 分析页面结构通过浏览器审查元素可以发现这个电子书网站是用 WordPress 搭建的,首页列表元素很简单,很规整所以我们可以查找 .entry-title > a 获取所有图书详情页的链接,接着我们进入详情页,来寻找下载链接,由下图可以发现 .download-links > a 里的链接就是该书的下载链接,回到列表页可以发现该站一共 700 多页,由此我们便可以循环列表获取所有的下载链接. R
Android 使用registerReceiver注册BroadcastReceiver案例详解

android.context.ContextWrapper.registerReceiver public Intent registerReceiver (BroadcastReceiver receiver, IntentFilter filter) Register a BroadcastReceiver to be run in the main activity thread. The receiver will be called with any broadcast Intent