鼠标滚轮切屏效果

某天发现一个网站《北京新鸿儒世纪网络技术有限公司》，一开始打开，哇，好简单啊，特别是首页，就一张图，后来发现里面有挺多小细节的，比如：做了媒体响应式、滚轮切屏（第一次见，整得挺酷）。

代码细节主要参考了：辣姐什么鬼
——js实现网页全屏切换（平滑过渡），鼠标滚动切换，她主要采用的是 2D 效果，实现的样式也很nice。我对这种小效果不是很熟练，也很烦它们的各种兼容，对我来说还是 定位 简单方便。

做这个需求之前，先要了解一下鼠标滚轮事件。

一、页面布局主要代码：

把要滚动的部分放到一个父级里面，方便管理：

<!-- 头部 -->
<header></header>

<!-- 主体部分 -->
<section>
<!---1、广告--->
  <div id="banner" class="active">
    <img src="./imgs/banner.jpg" alt="" srcset="">
  </div>

<!---2、很多icons的部分 --->
  <div id="icons" class="downActive">
    <ul class="clear">
      <li>
        <img src="./imgs/common/icons1.jpg" alt="">
      </li>
      <li>
        <img src="./imgs/common/icons2.jpg" alt="">
      </li>
      <!--- ..... --->
    </ul>
  </div>

<!---3、关于--->
  <div id="about" class="bg downActive">
    <h4><a href="公司" target="_blank">关于 新鸿儒</a></h4>
    <p>北京新鸿儒成立于1998年，作为中国互联网资深服务商<br>专注于互联网平台开发、新媒体运营服务、云计算服务三大板块，致力于为一流的品牌提供互联网全案服务。<br>新鸿儒已经成功为众多世界五百强、中国五百强企业提供网站建设服务，<br>并在微信公众号运营、云架构咨询服务得到客户和行业的一致认可。</p>
    <a href="公司" target="_blank">了解新鸿儒 &gt;</a>
  </div>

<!----4、底部---->
  <footer class="bg downActive">
    <div class="margin clear footer-t">
      <a href="#" target="_blank">
        <img src="./imgs/indexFoot1.jpg" alt="" srcset="">
      </a>
      <a href="#">
        <img src="./imgs/indexFoot.jpg" alt="" srcset="">
      </a>
    </div>

    <div class="footer-b">
      <div class="margin clear">
        <ul class="clear">
          <li><a href="./example.html">客户与案例</a><a href="./example.html">客户案例</a></li>
          <li>
            <a href="./服务.html">服务</a>
            <a href="./服务.html">品牌网站建设</a>
            <a href="./服务.html">移动应用</a>
            <a href="./服务.html">互联网运维</a>
            <a href="./服务.html">影像创意</a>
          </li>
          <!---- .......---->
        </ul>

        <div class="footer-b-r">
          <img src="./imgs/footerLogo.png" alt="">
          <p class="tit"><span>©1998－2021 北京新鸿儒世纪网络技术有限公司</span><span>版权所有</span> <br>
            <span>新鸿儒网站建设公司</span><span>地址：北京市朝阳区高碑店服仓国际文化创意产业园KASO3层</span><br>
            <span><a rel="nofollow" href="https://www.beian.miit.gov.cn/" target="_blank">京ICP备09021176号</a></span><br>
            <span>公安机关备案号：11010502030953</span><span>新鸿儒提供:北京网站建设/北京网站制作/北京网站设计等服务</span>
            </p>
        </div>
      </div>
    </div>
  </footer>
</section>

二、主体部分css

<style>
  *{margin:0;padding:0;}
  /*主要css代码---start*/
  section{
    width: 100%; height: calc(100% - 111px); /*宽高自适应整个浏览器，多余部分隐藏*/
    position: relative; left: 0; top:111px;
    overflow: hidden;
  }
  section>div,section>footer{
    width:100%; height: 100%; /*每一个子块宽高都是占满整个屏幕的*/
    position: absolute;left: 0;z-index: 0;
    overflow: hidden;
    -webkit-transition: all 0.8s ease-in-out;
    -moz-transition: all 0.8s ease-in-out;
    -o-transition: all 0.8s ease-in-out;
    transition: all .8s ease-in-out;
  }
  section>.active{top: 0 !important;z-index: 1;}
  section>.downActive{top:100%;}
  section>.upActive{top:-100%;z-index:0};
  /*主要css代码---end*/
  
  /*1、广告部分*/
  section>div#banner img{display: block;width: 100%;height: 100%;object-fit: cover;}
  /*2、很多icons*/
  section>div#icons ul{height: 100%;width: 100%;}
  section>div#icons ul li{float:left;height: 33.333%;width: 25%;}
  section>div#icons ul li img{display: block;width: 100%;height: 100%;object-fit: cover;}
  /*......*/
</style>

因为初始时只能看到section中的第一个块，想要看到后面的，只能通过鼠标滚轮下滚操作，让下面的子块上去。

注意：

• .active：初始时给 section 中的第一块子元素添加；
• .downActive：初始时给 section 中除了第一个块子元素的所有子元素添加；
• .upActive：滚轮上滚时，想要看到上面块信息的样式。
• 每个大块最好写上背景色，因为用的定位，不然会影响当前操作的块。

三、js 部分

window.onload = function (){
  //获取section中的子元素
  var childDomArr = document.querySelector("section").children; 

  //判断鼠标滚轮滚动方向
  if (window.addEventListener){  //FF,火狐浏览器会识别该方法
    window.addEventListener('DOMMouseScroll', wheel, false);
  }
  window.onmousewheel = document.onmousewheel = wheel;  //W3C

  var throldHold = 800; //两次滚动滚轮事件最小时间间隔
  var flag = true;  //是否可以调用滚轮事件的方法 true:可以
  var timer = null;
  
  //统一处理滚轮滚动事件 
  function wheel(event){
    var delta = 0;
    if (!event) event = window.event;
    if (event.wheelDelta) {  //IE、chrome浏览器使用的是wheelDelta，并且值为“正负120”
      delta = event.wheelDelta/120; 
      if (window.opera) delta = -delta;
    } else if (event.detail) {  //FF浏览器使用的是detail,其值为“正负3”
      delta = -event.detail/3;
    }
    
    if( flag && delta ){ //判断滚轮事件
      flag = false;
      handle(delta, childDomArr); //调用滚轮事件的方法
      timer = setTimeout(function(){ //超过规定时间间隔之后，将flag=true
        clearInterval(timer);
        flag = true;
      }, throldHold);
    }
  }

  //上下滚动时的具体处理函数
  function handle(delta, arr) {
    var num;
    for(var i=0;i<arr.length;i++){//得到当前checked元素的下标
      if(arr[i].classList.contains('active')){
        num = i;
      }
    }
    
    if (delta <0 && num<arr.length-1){//向下滚动
    console.log("向下")
      arr[num].classList.remove('active'); //删除当前的
      num++;
      arr[num].classList.remove('downActive'); //给下一个（要被看到的DOM）添加
      arr[num].classList.add('active');  //给下一个（要被看到的DOm）添加
    } else if (delta > 0 && num>0){//向上滚动
      arr[num].classList.remove('active');
      arr[num].classList.add('upActive');
      num--;
      arr[num].classList.add('active');

      arr[num+1].classList.remove('upActive');  //裂开
      arr[num+1].classList.add('downActive');   //裂开
      //其实这两行的代码就像是第一次向下滚动时的样式
    }
  }


}

仔细观察可以发现，原作者的导航栏与每一个切屏的块是相关联的，而且她跳着访问时，会有种连续滑动的感觉。
这里的块跟导航没有相关联，所以没做这一步，感兴趣的伙伴可以试一试。

还有 jquery 实现滚轮切屏的