某天發(fā)現(xiàn)一個網(wǎng)站《北京新鴻儒世紀(jì)網(wǎng)絡(luò)技術(shù)有限公司》，一開始打開，哇，好簡單啊，特別是首頁，就一張圖，后來發(fā)現(xiàn)里面有挺多小細(xì)節(jié)的，比如：做了媒體響應(yīng)式、滾輪切屏（第一次見，整得挺酷）。

代碼細(xì)節(jié)主要參考了：辣姐什么鬼
——js實現(xiàn)網(wǎng)頁全屏切換（平滑過渡），鼠標(biāo)滾動切換，她主要采用的是 2D 效果，實現(xiàn)的樣式也很nice。我對這種小效果不是很熟練，也很煩它們的各種兼容，對我來說還是 定位 簡單方便。

做這個需求之前，先要了解一下鼠標(biāo)滾輪事件。

一、頁面布局主要代碼：

把要滾動的部分放到一個父級里面，方便管理：

<!-- 頭部 --> <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、關(guān)于---><div id="about" class="bg downActive"><h4><a href="公司" target="_blank">關(guān)于 新鴻儒</a></h4><p>北京新鴻儒成立于1998年，作為中國互聯(lián)網(wǎng)資深服務(wù)商<br>專注于互聯(lián)網(wǎng)平臺開發(fā)、新媒體運(yùn)營服務(wù)、云計算服務(wù)三大板塊，致力于為一流的品牌提供互聯(lián)網(wǎng)全案服務(wù)。<br>新鴻儒已經(jīng)成功為眾多世界五百強(qiáng)、中國五百強(qiáng)企業(yè)提供網(wǎng)站建設(shè)服務(wù)，<br>并在微信公眾號運(yùn)營、云架構(gòu)咨詢服務(wù)得到客戶和行業(yè)的一致認(rèn)可。</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="./服務(wù).html">服務(wù)</a><a href="./服務(wù).html">品牌網(wǎng)站建設(shè)</a><a href="./服務(wù).html">移動應(yīng)用</a><a href="./服務(wù).html">互聯(lián)網(wǎng)運(yùn)維</a><a href="./服務(wù).html">影像創(chuàng)意</a></li><!---- .......----></ul><div class="footer-b-r"><img src="./imgs/footerLogo.png" alt=""><p class="tit"><span>?1998－2021 北京新鴻儒世紀(jì)網(wǎng)絡(luò)技術(shù)有限公司</span><span>版權(quán)所有</span> <br><span>新鴻儒網(wǎng)站建設(shè)公司</span><span>地址：北京市朝陽區(qū)高碑店服倉國際文化創(chuàng)意產(chǎn)業(yè)園KASO3層</span><br><span><a rel="nofollow" href="https://www.beian.miit.gov.cn/" target="_blank">京ICP備09021176號</a></span><br><span>公安機(jī)關(guān)備案號：11010502030953</span><span>新鴻儒提供:北京網(wǎng)站建設(shè)/北京網(wǎng)站制作/北京網(wǎng)站設(shè)計等服務(wù)</span></p></div></div></div></footer> </section>

二、主體部分css

<style>*{margin:0;padding:0;}/*主要css代碼---start*/section{width: 100%; height: calc(100% - 111px); /*寬高自適應(yīng)整個瀏覽器，多余部分隱藏*/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中的第一個塊，想要看到后面的，只能通過鼠標(biāo)滾輪下滾操作，讓下面的子塊上去。

注意：

• .active：初始時給 section 中的第一塊子元素添加；
• .downActive：初始時給 section 中除了第一個塊子元素的所有子元素添加；
• .upActive：滾輪上滾時，想要看到上面塊信息的樣式。
• 每個大塊最好寫上背景色，因為用的定位，不然會影響當(dāng)前操作的塊。

三、js 部分

window.onload = function (){//獲取section中的子元素var childDomArr = document.querySelector("section").children; //判斷鼠標(biāo)滾輪滾動方向if (window.addEventListener){ //FF,火狐瀏覽器會識別該方法window.addEventListener('DOMMouseScroll', wheel, false);}window.onmousewheel = document.onmousewheel = wheel; //W3Cvar throldHold = 800; //兩次滾動滾輪事件最小時間間隔var flag = true; //是否可以調(diào)用滾輪事件的方法 true:可以var timer = null;//統(tǒng)一處理滾輪滾動事件 function wheel(event){var delta = 0;if (!event) event = window.event;if (event.wheelDelta) { //IE、chrome瀏覽器使用的是wheelDelta，并且值為“正負(fù)120”delta = event.wheelDelta/120; if (window.opera) delta = -delta;} else if (event.detail) { //FF瀏覽器使用的是detail,其值為“正負(fù)3”delta = -event.detail/3;}if( flag && delta ){ //判斷滾輪事件flag = false;handle(delta, childDomArr); //調(diào)用滾輪事件的方法timer = setTimeout(function(){ //超過規(guī)定時間間隔之后，將flag=trueclearInterval(timer);flag = true;}, throldHold);}}//上下滾動時的具體處理函數(shù)function handle(delta, arr) {var num;for(var i=0;i<arr.length;i++){//得到當(dāng)前checked元素的下標(biāo)if(arr[i].classList.contains('active')){num = i;}}if (delta <0 && num<arr.length-1){//向下滾動console.log("向下")arr[num].classList.remove('active'); //刪除當(dāng)前的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'); //裂開//其實這兩行的代碼就像是第一次向下滾動時的樣式}}}

仔細(xì)觀察可以發(fā)現(xiàn)，原作者的導(dǎo)航欄與每一個切屏的塊是相關(guān)聯(lián)的，而且她跳著訪問時，會有種連續(xù)滑動的感覺。
這里的塊跟導(dǎo)航?jīng)]有相關(guān)聯(lián)，所以沒做這一步，感興趣的伙伴可以試一試。

還有 jquery 實現(xiàn)滾輪切屏的

總結(jié)

以上是生活随笔為你收集整理的鼠标滚轮切屏效果的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。