鼠标滚轮切屏效果

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

代码细节主要参考了：辣姐什么鬼
——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;  //W3Cvar 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=trueclearInterval(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');   //裂开//其实这两行的代码就像是第一次向下滚动时的样式}}}