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;
}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念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

推荐阅读更多精彩内容

  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 27,509评论 1 45
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,756评论 1 92
  • 通过jQuery,您可以选取(查询,query)HTML元素,并对它们执行“操作”(actions)。 jQuer...
    枇杷树8824阅读 658评论 0 3
  • 一、样式篇 第1章 初识jQuery (1)环境搭建 进入官方网站获取最新的版本 http://jquery.co...
    凛0_0阅读 3,392评论 0 44
  • 前端开发面试题 面试题目: 根据你的等级和职位的变化,入门级到专家级,广度和深度都会有所增加。 题目类型: 理论知...
    怡宝丶阅读 2,587评论 0 7