美文网首页
jquery 滚轮插件 示例 - 整屏滚动

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

作者: Devops海洋的渔夫 | 来源:发表于2019-05-03 01:54 被阅读0次

    在上一篇张写了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;
    }
    

    相关文章

      网友评论

          本文标题:jquery 滚轮插件 示例 - 整屏滚动

          本文链接:https://www.haomeiwen.com/subject/cobwnqtx.html