jquery 滾輪插件示例 - 整屏滾動

在上一篇張寫了jquery 滾輪插件 jquery.mousewheel.js绘搞，可以根據(jù)滾輪上下滾動的事件，觸發(fā)控制整個屏幕的切換刘莹。

正屏滾動的需求

編寫通過滾輪上下切換這五個屏幕效果恕洲。

要做出這個效果蛤奥，其實不用說，首先要把這五個div的基本HTML+CSS給寫出來先裆馒。

準(zhǔn)備好五個圖片

001.png

002.png

003.png

004.png

005.png

好了姊氓，有了這些基本圖片之后，就是實現(xiàn)出來啦喷好。

在下面實現(xiàn)代碼的時候需要使用定時器來控制函數(shù)節(jié)流翔横，因為鼠標(biāo)的滾輪事件觸發(fā)非常快梗搅，必須限制之后才能有較好的體驗禾唁，概念如下。

函數(shù)節(jié)流

javascript中有些事件的觸發(fā)頻率非常高无切，比如onresize事件(jq中是resize)荡短，onmousemove事件(jq中是mousemove)以及上面說的鼠標(biāo)滾輪事件，在短事件內(nèi)多處觸發(fā)執(zhí)行綁定的函數(shù)哆键，可以巧妙地使用定時器來減少觸發(fā)的次數(shù)掘托，實現(xiàn)函數(shù)節(jié)流。

實現(xiàn)代碼

html

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="css/root.css">
    <script type="text/javascript" src="jquery/jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="jquery-mousewheel/jquery.mousewheel.min.js"></script>
    <script type="text/javascript">
        $(function(){

            // 定義當(dāng)前應(yīng)該切換到哪一個頁面
            var $nowIndex = 0;
            var $len = $('.page').length;
            var $height = $(window).height();

            // 定義高度
            $('.pages_warper').css({'height':$height-1});
            $('.pages_warper_inner').css({'height':$height*$len});
            $('.pages_warper_inner .page').css({'height':$height});

            // 用于函數(shù)節(jié)流：降低滾動觸發(fā)修改$nowIndex的頻率
            var timer = null

            // 初始化第一頁的動畫效果
            $(".pages_warper_inner .page").animate({
                'opacity':1
            },1000)

            $(".pages_warper_inner .warper1 .left").animate({
                'margin-left':'10%',
            },1000)

            $(".pages_warper_inner .warper1 .right p").animate({
                'margin-left':'10%',
            },1000)

            // 事件委托洼哎，監(jiān)聽li點擊事件烫映，切換對應(yīng)的page
            $('ul').delegate("li","click",function(){

                $(this).addClass('active').siblings().removeClass('active');

                $nowIndex = $(this).index();

                // 滾動向上向下的動畫效果
                $(".pages_warper_inner").animate({
                    'margin-top':-$height*$nowIndex,
                },1000,'swing');

                pages_toggle(); // 切換page動畫
            })

            $(window).mousewheel(function(event) {

                clearTimeout(timer);

                timer = setTimeout(function(){
                    // 滾輪向上：event.deltaY = 1
                    // 滾輪向下：event.deltaY = -1
                    $nowIndex = $nowIndex - event.deltaY;

                    console.log($nowIndex);

                    // 一共只有5個頁面沼本，所以需要限制一下nowIndex 0 - 4
                    if ($nowIndex < 0) {
                        $nowIndex = 0;
                    }

                    if ($nowIndex > ($len - 1)) {
                        $nowIndex = ($len - 1);
                    }

                    // 滾動向上向下的動畫效果
                    $(".pages_warper_inner").animate({
                        'margin-top':-$height*$nowIndex,
                    },1000,'swing');

                    // 設(shè)置ul的active屬性
                    // alert($("ul li").length);
                    $("ul li").eq($nowIndex).addClass('active').siblings().removeClass('active');

                    pages_toggle(); // 執(zhí)行切換page動畫

                },500)
            });

            // 切換page動畫的方法
            function pages_toggle(){
                switch($nowIndex){
                    case 0: // page 1 的動畫
                        $(".pages_warper_inner .warper1 .left").css({
                            'margin-left':0,
                            'opacity':0
                        });
                        $(".pages_warper_inner .warper1 .left").animate({
                            'margin-left':'10%',
                            'opacity':1
                        },2000)


                        $(".pages_warper_inner .warper1 .right p").css({
                            'margin-left':'50%',
                            'opacity':0
                        })
                        $(".pages_warper_inner .warper1 .right p").animate({
                            'margin-left':'10%',
                            'opacity':1
                        },2000)
                        break;
                    case 1: // page 2 的動畫
                        $(".pages_warper_inner .warper2 .left").css({
                            'margin-left':'0',
                            'opacity':0
                        })
                        $(".pages_warper_inner .warper2 .left").animate({
                            'margin-left':'5%',
                            'opacity':1
                        },2000)


                        $(".pages_warper_inner .warper2 .right").css({
                            'margin-right':'-50%',
                            'opacity':0
                        })
                        $(".pages_warper_inner .warper2 .right").animate({
                            'margin-right':0,
                            'opacity':1
                        },2000)

                        break;
                     case 2: // page 3 的動畫
                        $(".pages_warper_inner .warper3 .left").css({
                            'margin-left':0,
                            'opacity':0
                        });
                        $(".pages_warper_inner .warper3 .left").animate({
                            'margin-left':'20%',
                            'opacity':1
                        },2000)


                        $(".pages_warper_inner .warper3 .right p").css({
                            'margin-left':'50%',
                            'opacity':0
                        })
                        $(".pages_warper_inner .warper3 .right p").animate({
                            'margin-left':'10%',
                            'opacity':1
                        },2000)
                        break;
                      case 3: // page 4 的動畫
                        $(".pages_warper_inner .warper4 .left").css({
                            'margin-left':0,
                            'opacity':0
                        });
                        $(".pages_warper_inner .warper4 .left").animate({
                            'margin-left':'10%',
                            'opacity':1
                        },2000)


                        $(".pages_warper_inner .warper4 .right p").css({
                            'margin-left':'50%',
                            'opacity':0
                        })
                        $(".pages_warper_inner .warper4 .right p").animate({
                            'margin-left':'10%',
                            'opacity':1
                        },2000)
                        break;
                      case 4: // page 5 的動畫
                        $(".pages_warper_inner .warper5 .center").css({
                            'transform':"rotateZ(0deg)",
                        });
                        $(".pages_warper_inner .warper5 .center").css({
                            'transform':"rotateZ(360deg)",
                        });
                        break;
                  }
            }

        })
    </script>
</head>
<body>
    <div class="pages_warper">
        <div class="pages_warper_inner">
            <div class="warper1 page">
                <div class="left"></div>
                <div class="right">
                    <p>
                        Web前端開發(fā)是從網(wǎng)頁制作演變而來的噩峦，名稱上有很明顯的時代特征锭沟。在互聯(lián)網(wǎng)的演化進程中，網(wǎng)頁制作是Web1.0時代的產(chǎn)物识补，那時網(wǎng)站的主要內(nèi)容都是靜態(tài)的族淮，用戶使用網(wǎng)站的行為也以瀏覽為主。
                    </p>
                </div>
            </div>
            <div class="warper2 page">
                <div class="left">
                    <p>
                        2005年以后凭涂，互聯(lián)網(wǎng)進入Web2.0時代祝辣，各種類似桌面軟件的Web應(yīng)用大量涌現(xiàn)，網(wǎng)站的前端由此發(fā)生了翻天覆地的變化切油。網(wǎng)頁不再只是承載單一的文字和圖片蝙斜，各種富媒體讓網(wǎng)頁的內(nèi)容更加生動，網(wǎng)頁上軟件化的交互形式為用戶提供了更好的使用體驗澎胡，這些都是基于前端技術(shù)實現(xiàn)的孕荠。
                    </p>
                </div>
                <div class="right">
                </div>
            </div>
            <div class="warper3 page">
                <div class="left"></div>
                <div class="right">
                    <p>
                        以前會Photoshop和Dreamweaver就可以制作網(wǎng)頁，現(xiàn)在只掌握這些已經(jīng)遠(yuǎn)遠(yuǎn)不夠了攻谁。無論是開發(fā)難度上稚伍，還是開發(fā)方式上，現(xiàn)在的網(wǎng)頁制作都更接近傳統(tǒng)的網(wǎng)站后臺開發(fā)戚宦，所以現(xiàn)在不再叫網(wǎng)頁制作个曙，而是叫Web前端開發(fā)。
                    </p>
                </div>
            </div>
            <div class="warper4 page">
                <div class="left"></div>
                <div class="right">
                    <p>
                        Web前端開發(fā)在產(chǎn)品開發(fā)環(huán)節(jié)中的作用變得越來越重要受楼，而且需要專業(yè)的前端工程師才能做好垦搬，這方面的專業(yè)人才近幾年來備受青睞。Web前端開發(fā)是一項很特殊的工作艳汽，涵蓋的知識面非常廣猴贰，既有具體的技術(shù)，又有抽象的理念骚灸。簡單地說糟趾，它的主要職能就是把網(wǎng)站的界面更好地呈現(xiàn)給用戶。
                    </p>
                </div>
            </div>
            <div class="warper5 page">
                <div class="center"></div>
            </div>
        </div>
    </div>
        
    <ul>
        <li class="active"></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</body>
</html>

css

* {
    margin: 0;
    padding: 0
}

.pages_warper{
    width: 100%;
    background-color: gold;
    overflow: hidden;
    font-size: 14px;
    font-family: "Microsoft Yahei";
}

.pages_warper_inner{
    /*position: absolute;*/
    /*top: 0;*/
    background-color: cyan;
    margin-top: 0;
}

.pages_warper_inner .warper1{background-color: orange;}
.pages_warper_inner .warper2{background-color: lightgreen;}
.pages_warper_inner .warper3{background-color: cyan;}
.pages_warper_inner .warper4{background-color: pink;}
.pages_warper_inner .warper5{background-color: lightblue;}

.pages_warper_inner .page{position: relative;opacity: 0;}

.pages_warper_inner .page .left{width: 50%;height: 100%;position: absolute;}
.pages_warper_inner .page .right{width: 50%;height: 100%;position: absolute;right: 0;}

.pages_warper_inner .warper1 .left{background:url("../images/001.png") left no-repeat;}
.pages_warper_inner .warper1 .right p{margin-top: 30%;margin-left: 50%;width: 70%;text-indent: 28px;line-height: 40px;}

.pages_warper_inner .warper2 .left p{margin-top: 30%;margin-right: 50%;width: 70%;text-indent: 28px;line-height: 40px;}
.pages_warper_inner .warper2 .right{background:url("../images/002.png") left no-repeat;}

.pages_warper_inner .warper3 .left{background:url("../images/003.png") left no-repeat;}
.pages_warper_inner .warper3 .right p{margin-top: 30%;margin-left: 50%;width: 70%;text-indent: 28px;line-height: 40px;}

.pages_warper_inner .warper4 .left{background:url("../images/004.png") left no-repeat;}
.pages_warper_inner .warper4 .right p{margin-top: 30%;margin-left: 50%;width: 70%;text-indent: 28px;line-height: 40px;}

.pages_warper_inner .warper5 .center{height: 100%;background:url("../images/005.png") center no-repeat;transform: rotateZ(0deg);transition: all 3s ease;}

/*ul li 樣式*/
ul{
    position: fixed;
    top: 35%;
    right: 3%;
    list-style: none;
}

ul li{
    width: 18px;
    height: 18px;
    border: 1px solid #666;
    border-radius: 100%;
    margin: 10px;
    cursor: pointer;
}

ul .active{
    background-color: #ccc;
}

最后編輯于：2019.05.07 00:49:07

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者

人面猴
序言：七十年代末甚牲，一起剝皮案震驚了整個濱河市义郑，隨后出現(xiàn)的幾起案子，更是在濱河造成了極大的恐慌丈钙，老刑警劉巖非驮，帶你破解...
沈念sama閱讀 211,348評論 6贊 491
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件，死亡現(xiàn)場離奇詭異雏赦，居然都是意外死亡劫笙，警方通過查閱死者的電腦和手機芙扎，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 90,122評論 2贊 385
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來填大，“玉大人戒洼，你說我怎么就攤上這事≡驶” “怎么了圈浇？”我有些...
開封第一講書人閱讀 156,936評論 0贊 347
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵，是天一觀的道長靴寂。經(jīng)常有香客問我磷蜀，道長，這世上最難降的妖魔是什么百炬？我笑而不...
開封第一講書人閱讀 56,427評論 1贊 283
?港島之戀（遺憾婚禮）
正文為了忘掉前任褐隆，我火速辦了婚禮，結(jié)果婚禮上剖踊，老公的妹妹穿的比我還像新娘庶弃。我一直安慰自己，他們只是感情好蜜宪，可當(dāng)我...
茶點故事閱讀 65,467評論 6贊 385
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布虫埂。她就那樣靜靜地躺著，像睡著了一般圃验。火紅的嫁衣襯著肌膚如雪掉伏。梳的紋絲不亂的頭發(fā)上，一...
開封第一講書人閱讀 49,785評論 1贊 290
城市分裂傳說
那天澳窑，我揣著相機與錄音斧散，去河邊找鬼。笑死摊聋，一個胖子當(dāng)著我的面吹牛鸡捐，可吹牛的內(nèi)容都是我干的。我是一名探鬼主播麻裁，決...
沈念sama閱讀 38,931評論 3贊 406
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼箍镜，長吁一口氣：“原來是場噩夢啊……” “哼！你這毒婦竟也來了煎源？” 一聲冷哼從身側(cè)響起色迂，我...
開封第一講書人閱讀 37,696評論 0贊 266
萬榮殺人案實錄
序言：老撾萬榮一對情侶失蹤，失蹤者是張志新（化名）和其女友劉穎手销，沒想到半個月后歇僧，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體，經(jīng)...
沈念sama閱讀 44,141評論 1贊 303
?護林員之死
正文獨居荒郊野嶺守林人離奇死亡锋拖，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點故事閱讀 36,483評論 2贊 327
?白月光啟示錄
正文我和宋清朗相戀三年诈悍，在試婚紗的時候發(fā)現(xiàn)自己被綠了祸轮。大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
茶點故事閱讀 38,625評論 1贊 340
活死人
序言：一個原本活蹦亂跳的男人離奇死亡侥钳，死狀恐怖适袜，靈堂內(nèi)的尸體忽然破棺而出，到底是詐尸還是另有隱情慕趴，我是刑警寧澤痪蝇，帶...
沈念sama閱讀 34,291評論 4贊 329
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布鄙陡，位于F島的核電站冕房，受9級特大地震影響，放射性物質(zhì)發(fā)生泄漏趁矾。R本人自食惡果不足惜耙册，卻給世界環(huán)境...
茶點故事閱讀 39,892評論 3贊 312
男人毒藥：我在死后第九天來索命
文/蒙蒙一、第九天我趴在偏房一處隱蔽的房頂上張望毫捣。院中可真熱鬧详拙，春花似錦、人聲如沸蔓同。這莊子的主人今日做“春日...
開封第一講書人閱讀 30,741評論 0贊 21
一樁弒父案，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽斑粱。三九已至弃揽，卻和暖如春，著一層夾襖步出監(jiān)牢的瞬間则北，已是汗流浹背矿微。一陣腳步聲響...
開封第一講書人閱讀 31,977評論 1贊 265
情欲美人皮
我被黑心中介騙來泰國打工，沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留尚揣，地道東北人涌矢。一個月前我還...
沈念sama閱讀 46,324評論 2贊 360
代替公主和親
正文我出身青樓，卻偏偏與公主長得像快骗，于是被迫代替她去往敵國和親娜庇。傳聞我的和親對象是個殘疾皇子，可洞房花燭夜當(dāng)晚...
茶點故事閱讀 43,492評論 2贊 348

jquery 滾輪插件 示例 - 整屏滾動

正屏滾動的需求

準(zhǔn)備好五個圖片

函數(shù)節(jié)流

實現(xiàn)代碼

推薦閱讀更多精彩內(nèi)容

jquery 滾輪插件示例 - 整屏滾動