jquery 滚轮插件示例 - 整屏滚动

在上一篇张写了jquery 滚轮插件 jquery.mousewheel.js，可以根据滚轮上下滚动的事件，触发控制整个屏幕的切换。

正屏滚动的需求

编写通过滚轮上下切换这五个屏幕效果。

要做出这个效果，其实不用说，首先要把这五个div的基本HTML+CSS给写出来先。

准备好五个图片

001.png

002.png

003.png

004.png

005.png

好了，有了这些基本图片之后，就是实现出来啦。

在下面实现代码的时候需要使用定时器来控制函数节流，因为鼠标的滚轮事件触发非常快，必须限制之后才能有较好的体验，概念如下。

函数节流

javascript中有些事件的触发频率非常高，比如onresize事件(jq中是resize)，onmousemove事件(jq中是mousemove)以及上面说的鼠标滚轮事件，在短事件内多处触发执行绑定的函数，可以巧妙地使用定时器来减少触发的次数，实现函数节流。

实现代码

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(){

            // 定义当前应该切换到哪一个页面
            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});

            // 用于函数节流：降低滚动触发修改$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)

            // 事件委托，监听li点击事件，切换对应的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');

                    // 设置ul的active属性
                    // alert($("ul li").length);
                    $("ul li").eq($nowIndex).addClass('active').siblings().removeClass('active');

                    pages_toggle(); // 执行切换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前端开发是从网页制作演变而来的，名称上有很明显的时代特征。在互联网的演化进程中，网页制作是Web1.0时代的产物，那时网站的主要内容都是静态的，用户使用网站的行为也以浏览为主。
                    </p>
                </div>
            </div>
            <div class="warper2 page">
                <div class="left">
                    <p>
                        2005年以后，互联网进入Web2.0时代，各种类似桌面软件的Web应用大量涌现，网站的前端由此发生了翻天覆地的变化。网页不再只是承载单一的文字和图片，各种富媒体让网页的内容更加生动，网页上软件化的交互形式为用户提供了更好的使用体验，这些都是基于前端技术实现的。
                    </p>
                </div>
                <div class="right">
                </div>
            </div>
            <div class="warper3 page">
                <div class="left"></div>
                <div class="right">
                    <p>
                        以前会Photoshop和Dreamweaver就可以制作网页，现在只掌握这些已经远远不够了。无论是开发难度上，还是开发方式上，现在的网页制作都更接近传统的网站后台开发，所以现在不再叫网页制作，而是叫Web前端开发。
                    </p>
                </div>
            </div>
            <div class="warper4 page">
                <div class="left"></div>
                <div class="right">
                    <p>
                        Web前端开发在产品开发环节中的作用变得越来越重要，而且需要专业的前端工程师才能做好，这方面的专业人才近几年来备受青睐。Web前端开发是一项很特殊的工作，涵盖的知识面非常广，既有具体的技术，又有抽象的理念。简单地说，它的主要职能就是把网站的界面更好地呈现给用户。
                    </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

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 220,492评论 6赞 513
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 94,048评论 3赞 396
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 166,927评论 0赞 358
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 59,293评论 1赞 295
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 68,309评论 6赞 397
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 52,024评论 1赞 308
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 40,638评论 3赞 420
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 39,546评论 0赞 276
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 46,073评论 1赞 319
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 38,188评论 3赞 340
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 40,321评论 1赞 352
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 35,998评论 5赞 347
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 41,678评论 3赞 331
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 32,186评论 0赞 23
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 33,303评论 1赞 272
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 48,663评论 3赞 375
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 45,330评论 2赞 358

jquery 滚轮插件 示例 - 整屏滚动

正屏滚动的需求

准备好五个图片

函数节流

实现代码

推荐阅读更多精彩内容

jquery 滚轮插件示例 - 整屏滚动