成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

在全屏滾動(dòng)頁(yè)面下實(shí)現(xiàn)鼠標(biāo)滾輪的子級(jí)交互

godiscoder / 3158人閱讀

摘要：由此，我們可以完全屏蔽的默認(rèn)滾動(dòng)觸發(fā)，改用方法控制全屏滾動(dòng)，解除了全屏滾動(dòng)與鼠標(biāo)滾輪事件的強(qiáng)耦合。此外，通過定時(shí)器延時(shí)秒設(shè)置的值，將用戶的鼠標(biāo)滾輪操作強(qiáng)制分為兩步，最終實(shí)現(xiàn)了目的。

需求分析

剛進(jìn)公司產(chǎn)品提出一個(gè)需求：在全屏頁(yè)面中滾動(dòng)鼠標(biāo)滾輪更新文本，回滾再恢復(fù)原文本，同時(shí)不影響全屏頁(yè)面的正常切換：

初始狀態(tài)

向下滾動(dòng)鼠標(biāo)后出現(xiàn)新文本

看似一個(gè)非常簡(jiǎn)單的需求，但因?yàn)檫@是一個(gè)使用了fullPage.js的全屏滾動(dòng)頁(yè)面，默認(rèn)情況下滾動(dòng)鼠標(biāo)滾輪整個(gè)全屏頁(yè)面也會(huì)隨之滾動(dòng)，因此解決起來還是費(fèi)了一番功夫。

解決思路 引入jQuery 鼠標(biāo)滾輪插件 mousewheel

因?yàn)镕irefox在鼠標(biāo)滾輪滾動(dòng)事件上使用的API是DOMMouseScroll而非其他主流瀏覽器使用的onmousewheel，因此首先引入一個(gè)jQuery插件mousewheel以添加跨瀏覽器鼠標(biāo)滾動(dòng)事件的支持。

原始思路

一開始想到的方法是：當(dāng)頁(yè)面滾動(dòng)到某一個(gè)頁(yè)面時(shí)，先屏蔽fullPage.js的默認(rèn)滾動(dòng)觸發(fā)，即把setAllowScrolling設(shè)置為false；每次手指滾動(dòng)鼠標(biāo)滾輪，結(jié)合文本顯示的具體狀態(tài)和鼠標(biāo)滾輪滾動(dòng)的方向再更改setAllowScrolling的值恢復(fù)整個(gè)頁(yè)面的滾動(dòng)。例如，當(dāng)頁(yè)面滾動(dòng)到如上圖1所示的頁(yè)面時(shí)，文本是默認(rèn)文本，此時(shí)應(yīng)實(shí)現(xiàn)向上滾動(dòng)切換到上一頁(yè)，向下滾動(dòng)切換文字；當(dāng)處于上圖2所示的頁(yè)面時(shí)，應(yīng)實(shí)現(xiàn)向上滾動(dòng)切回原文字，向下滾動(dòng)切換到下一頁(yè)。可以通過自定義變量isDefaultPara紀(jì)錄每次滾動(dòng)鼠標(biāo)后，文本處于何種狀態(tài)。這種思路邏輯上是行的通的，但是存在兩個(gè)問題：一是沒有一個(gè)API可以反映用戶“滾動(dòng)了一次滾輪”，通過mousewheel插件我們可以獲取的數(shù)據(jù)僅僅只有滾動(dòng)的方向及滾動(dòng)角度大?。欢?b>setAllowScrolling不能選擇性地屏蔽某一方向的滾動(dòng)而只能全面禁止頁(yè)面滾動(dòng)，因此無論如何都無法實(shí)現(xiàn)上述例子所要達(dá)到的效果。

改進(jìn)思路

查閱fullPage.js的官方文檔之后，發(fā)現(xiàn)該插件提供了一個(gè)moveTo(section, slide)的方法函數(shù)，通過這個(gè)方法可以手動(dòng)將屏幕滾動(dòng)到某個(gè)section或者slide。由此，我們可以完全屏蔽fullPage.js的默認(rèn)滾動(dòng)觸發(fā)，改用moveTo方法控制全屏滾動(dòng)，解除了全屏滾動(dòng)與鼠標(biāo)滾輪事件的強(qiáng)耦合。此外，通過定時(shí)器延時(shí)1秒設(shè)置isDefaultPara的值，將用戶的鼠標(biāo)滾輪操作強(qiáng)制分為兩步，最終實(shí)現(xiàn)了目的。

具體代碼 
        //在fullpage()方法中添加以下兩個(gè)回調(diào)函數(shù)
        afterRender: function(){
            //頁(yè)面載入后，禁止默認(rèn)的鼠標(biāo)滾輪滾動(dòng)行為
            $.fn.fullpage.setAllowScrolling(false);
        },
        afterLoad: function(anchorLink, index){
            //此處只寫出滾動(dòng)到第3屏的代碼，其他屏同理
            if (index == 3) {
                //判定默認(rèn)文檔顯示狀態(tài)并存入isDefaultPara變量
                var isDefaultPara = $(".default-para").is(":visible");
                $(".section").eq(2).mousewheel(function(event, delta, deltaX, deltaY){
                    switch (true) {
                        case delta<0 && isDefaultPara:
                            $(".default-para").hide().removeClass("bounceInRight");
                            $(".post-para").show().addClass("bounceInLeft");
                            //當(dāng)文本出現(xiàn)的動(dòng)畫顯示完全(1s后)才能進(jìn)行下一步操作
                            setTimeout(function(){
                                defaultPara = false;
                            },1000);
                            break;
                        case delta>0 && isDefaultPara:
                            $.fn.fullpage.moveTo(2);
                            break;
                        case delta<0 && !isDefaultPara:
                            $.fn.fullpage.moveTo(4);
                            break;
                        case delta>0 && !isDefaultPara:
                            $(".post-para").hide().removeClass("bounceInLeft");
                            $(".default-para").show().addClass("bounceInRight");
                            setTimeout(function(){
                                firstPara = true;
                            },1000);
                        default:
                            return false;
          }

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/78396.html

相關(guān)文章

  • 用 ES6 寫全屏滾動(dòng)插件

    摘要：這篇文章將介紹如何使用原生主要使用語(yǔ)法實(shí)現(xiàn)全屏滾動(dòng)插件，兼容手機(jī)觸屏，觸摸板優(yōu)化，支持自定義頁(yè)面動(dòng)畫，壓縮后文件只有。 這篇文章將介紹如何使用原生 JS （主要使用 ES6 語(yǔ)法）實(shí)現(xiàn)全屏滾動(dòng)插件，兼容 IE 10+、手機(jī)觸屏，Mac 觸摸板優(yōu)化，支持自定義頁(yè)面動(dòng)畫，壓縮后 gzip 文件只有 2.15KB。完整源碼在這 pure-full-page，點(diǎn)這查看 demo。 1）前面的話...

    liuchengxu 評(píng)論0 收藏0

  • JavaScript 筆記 —— 鼠標(biāo)事件的瀏覽器差異

    摘要：本文總結(jié)一下，鼠標(biāo)事件在不同瀏覽器實(shí)現(xiàn)的差異。和相關(guān)元素差異和是級(jí)事件當(dāng)中的其中兩個(gè)事件。標(biāo)準(zhǔn)事件對(duì)象使用屬性來識(shí)別鼠標(biāo)按鍵。該事件當(dāng)中的值與事件對(duì)象當(dāng)中的作用相同。 鼠標(biāo)是我們?cè)?PC 端瀏覽網(wǎng)頁(yè)時(shí)候最重要的交互工具，因此鼠標(biāo)事件也是 Web 開發(fā)當(dāng)中最常用的一類事件。然而，由于各種原因，不同廠商或者不同版本的瀏覽器之間對(duì)于鼠標(biāo)事件的實(shí)現(xiàn)也有所不同。本文總結(jié)一下，鼠標(biāo)事件在不同瀏覽器...

    haoguo 評(píng)論0 收藏0

  • AlloyTouch全屏滾動(dòng)插件發(fā)布--30秒搞定順滑H5頁(yè)

    原文鏈接：https://github.com/AlloyTeam/AlloyTouch/wiki/AlloyTouch-FullPage-Plugin 先驗(yàn)貨 showImg(https://segmentfault.com/img/remote/1460000007885626?w=280&h=280); 插件代碼可以在這里找到。 注意，雖然是掃碼體驗(yàn)，但是AlloyTouch.FullPag...

    _ivan 評(píng)論0 收藏0

  • 事件代理及常用的 HTML 事件

    摘要：之前總結(jié)了事件捕獲和冒泡以及阻止事件傳播，今天寫一下事件代理方面的總結(jié)事件之捕獲冒泡阻止事件傳播事件代理監(jiān)聽列表中多項(xiàng)時(shí)，實(shí)現(xiàn)點(diǎn)擊控制臺(tái)打印對(duì)應(yīng)文本，如下蘋果香蕉葡萄首先想到的對(duì)每一個(gè)進(jìn)行監(jiān)聽或者使用和的區(qū)別是屬性，是方法。 之前總結(jié)了事件捕獲和冒泡以及阻止事件傳播，今天寫一下事件代理方面的總結(jié)DOM 事件之捕獲、冒泡：阻止事件傳播： 事件代理 監(jiān)聽列表中多項(xiàng) li 時(shí)，實(shí)現(xiàn)點(diǎn)擊 li...

    xavier 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<