jQuery练习-全屏滚动

一、实现思路：

        全屏滚动可以看作竖向的轮播图，通过鼠标的滚轮的上滑或下滑操作，向上或向下滑动一整屏。实现思路如下：设置行高100%的盒子，设定溢出隐藏（overflow: hidden）属性，盒子里嵌套着一个大盒子，用于装下轮播显示的小盒子。每一次滑动滚轮或点击向下的按钮，改变大盒子的top属性，向上或向下滚动。

二、实现过程：

1.html部分：

<div id="bodyBox">
    <div id="pageBox">
        <div class="page page1">
            <h1>page1</h1>
        </div>
        <div class="page page2">
            <h1>page2</h1>
        </div>
        <div class="page page3">
            <h1>page3</h1>
        </div>
        <div class="page page4">
            <h1>page4</h1>
        </div>
    </div>
    <div class="down"></div>
</div>

2.css部分：

    * {
        margin: 0;
        padding: 0;
    }

    html,
    body {
        height: 100%;
        overflow: hidden;
    }

    #bodyBox {
        height: 100%;
        width: 100%;
        position: relative;
    }

    #pageBox {
        width: 100%;
        height: 500%;
        position: absolute;
    }

    .page {
        width: 100%;
        text-align: center;
        /* overflow: hidden; */
    }

    .page h1 {
        position: relative;
        color: #fff;
        top: 50%;
    }

    .page1 {
        background-color: #a074c4;
    }

    .page2 {
        background-color: #f27154;
    }

    .page3 {
        background-color: #519aba;
    }

    .page4 {
        background-color: #2d5d7e;
    }

    .down {
        height: 30px;
        width: 30px;
        position: absolute;
        transform: rotate(45deg);
        border-bottom: 5px double #ccc;
        border-right: 5px double #ccc;
        bottom: 20px;
        left: 50%;
    }

3.jq代码：

$(function () {
    var flag = true;//节流阀开关：设置节流阀，实现一次只能移动一整屏
    var height = $('#bodyBox').height();
    var tem = 0;//记录当前是第几个盒子
    $('.page').css('height', height);//每一屏小盒子的高度是父容器的高度
    $('.down').on('click', function () {//点击向下按钮触发的事件
        if (tem < $('.page').length - 1) {
            if(flag){
                flag = false;
                $('#pageBox').animate({
                    top: -height * ++tem
                }, 1000,function(){//回调函数，在动画停止后执行
                    flag = true;
                })                    
            }

        }
    })
    $(document).on('mousewheel', function (e) {//鼠标滚轮事件
        console.log(e.originalEvent.wheelDelta);
        var delta = e.originalEvent.wheelDelta;
        if (delta < 0)//如果滚轮向下，触发向下按钮的点击事件
            $('.down').click();
        else {
               //滚轮向上，屏幕向上滚动
            if (tem > 0) {
                if(flag){
                    flag = false;
                    $('#pageBox').animate({
                        top: -height * --tem
                    }, 1000,function(){
                        flag = true;
                    })                       
                }

            }
        }

    })
})