鼠标滚动倾斜分割切换

css部分：

   <style>
        body, html { font-size: 100%;     padding: 0; margin: 0;}

        /* Reset */
        *,
        *:after,
        *:before {
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
        }

        /* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */
        .clearfix:before,
        .clearfix:after {
            content: " ";
            display: table;
        }

        .clearfix:after {
            clear: both;
        }

        body{
            /*background: #f9f7f6;
            color: #404d5b;*/
            background: #494A5F;
            color: #D5D6E2;
            font-weight: 500;
            font-size: 1.05em;
            font-family: "Microsoft YaHei","宋体","Segoe UI", "Lucida Grande", Helvetica, Arial,sans-serif, FreeSans, Arimo;
        }
        a{color: #2fa0ec;text-decoration: none;outline: none;}
        a:hover,a:focus{color:#74777b;}
        *, *:before, *:after {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        body {
            background: #15181A;
            font-family: "Open Sans", Helvetica, Arial, sans-serif;
        }

        .skw-pages {
            overflow: hidden;
            position: relative;
            height: 100vh;
        }

        .skw-page {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
        }
        .skw-page__half {
            position: absolute;
            top: 0;
            width: 50%;
            height: 100vh;
            -webkit-transition: -webkit-transform 1s;
            transition: transform 1s;
        }
        .skw-page__half--left {
            left: 0;
            -webkit-transform: translate3d(-32.4vh, 100%, 0);
            transform: translate3d(-32.4vh, 100%, 0);
        }
        .skw-page__half--right {
            left: 50%;
            -webkit-transform: translate3d(32.4vh, -100%, 0);
            transform: translate3d(32.4vh, -100%, 0);
        }

        .skw-page.active .skw-page__half {
            -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
        }

        .skw-page__skewed {
            overflow: hidden;
            position: absolute;
            top: 0;
            width: 140%;
            height: 100%;
            -webkit-transform: skewX(-18deg);
            -ms-transform: skewX(-18deg);
            transform: skewX(-18deg);
            background: #000;
        }
        .skw-page__half--left .skw-page__skewed {
            left: -40%;
        }
        .skw-page__half--right .skw-page__skewed {
            right: -40%;
        }
        .skw-page__content {
            display: -webkit-box;
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
            -webkit-align-items: center;
            -ms-flex-align: center;
            align-items: center;
            -webkit-box-pack: center;
            -webkit-justify-content: center;
            -ms-flex-pack: center;
            justify-content: center;
            -webkit-flex-flow: column wrap;
            -ms-flex-flow: column wrap;
            flex-flow: column wrap;
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            padding: 0 30%;
            color: #fff;
            -webkit-transform: skewX(18deg);
            -ms-transform: skewX(18deg);
            transform: skewX(18deg);
            -webkit-transition: -webkit-transform 1s, opacity 1s;
            transition: transform 1s, opacity 1s;
            background-size: cover;
        }
        .skw-page__half--left .skw-page__content {
            padding-left: 30%;
            padding-right: 30%;
            -webkit-transform-origin: 100% 0;
            -ms-transform-origin: 100% 0;
            transform-origin: 100% 0;
        }
        .skw-page__half--right .skw-page__content {
            padding-left: 30%;
            padding-right: 30%;
            -webkit-transform-origin: 0 100%;
            -ms-transform-origin: 0 100%;
            transform-origin: 0 100%;
        }
        .skw-page.inactive .skw-page__content {
            opacity: 0.5;
            -webkit-transform: skewX(18deg) scale(0.95);
            -ms-transform: skewX(18deg) scale(0.95);
            transform: skewX(18deg) scale(0.95);
        }
        .skw-page__heading {
            margin-bottom: 15px;
            text-transform: uppercase;
            font-size: 25px;
            text-align: center;
        }
        .skw-page__description {
            font-size: 18px;
            text-align: center;
        }
        .skw-page__link {
            color: #FFA0A0;
        }
        .skw-page-1 .skw-page__half--left .skw-page__content {
            background-image: url("../../../../img/kaka1.jpg");
        }
        .skw-page-1 .skw-page__half--right .skw-page__content {
            background: #292929;
        }
        .skw-page-2 .skw-page__half--left .skw-page__content {
            background: #292929;
        }
        .skw-page-2 .skw-page__half--right .skw-page__content {
            background-image: url("../../../../img/kaka2.jpg");
        }
        .skw-page-3 .skw-page__half--left .skw-page__content {
            background-image: url("../../../../img/kaka3.jpg");
        }
        .skw-page-3 .skw-page__half--right .skw-page__content {
            background: #292929;
        }
        .skw-page-4 .skw-page__half--left .skw-page__content {
            background: #292929;
        }
        .skw-page-4 .skw-page__half--right .skw-page__content {
            background-image: url("../../../../img/kaka4.jpg");
        }
        .skw-page-5 .skw-page__half--left .skw-page__content {
            background-image: url("../../../../img/kaka5.jpg");
        }
        .skw-page-5 .skw-page__half--right .skw-page__content {
            background: #292929;
        }
    </style>

html部分：

<div class="skw-pages">
    <div class="skw-page skw-page-1 active">
        <div class="skw-page__half skw-page__half--left">
            <div class="skw-page__skewed">
                <div class="skw-page__content"></div>
            </div>
        </div>
        <div class="skw-page__half skw-page__half--right">
            <div class="skw-page__skewed">
                <div class="skw-page__content">
                    <h2 class="skw-page__heading">jQuery倾斜分割鼠标滚动切换代码</h2>
                    <p>适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。</p>
                </div>
            </div>
        </div>
    </div>
    <div class="skw-page skw-page-2">
        <div class="skw-page__half skw-page__half--left">
            <div class="skw-page__skewed">
                <div class="skw-page__content">
                    <h2 class="skw-page__heading">Page 2</h2>
                    <p class="skw-page__description">Nothing to do here, continue scrolling.</p>
                </div>
            </div>
        </div>
        <div class="skw-page__half skw-page__half--right">
            <div class="skw-page__skewed">
                <div class="skw-page__content"></div>
            </div>
        </div>
    </div>
    <div class="skw-page skw-page-3">
        <div class="skw-page__half skw-page__half--left">
            <div class="skw-page__skewed">
                <div class="skw-page__content"></div>
            </div>
        </div>
        <div class="skw-page__half skw-page__half--right">
            <div class="skw-page__skewed">
                <div class="skw-page__content">
                    <h2 class="skw-page__heading">Page 3</h2>
                    <p class="skw-page__description">The end is near, I promise!</p>
                </div>
            </div>
        </div>
    </div>
    <div class="skw-page skw-page-4">
        <div class="skw-page__half skw-page__half--left">
            <div class="skw-page__skewed">
                <div class="skw-page__content">
                    <h2 class="skw-page__heading">Page 4</h2>
                    <p class="skw-page__description">Ok, ok, just one more scroll!</p>
                </div>
            </div>
        </div>
        <div class="skw-page__half skw-page__half--right">
            <div class="skw-page__skewed">
                <div class="skw-page__content"></div>
            </div>
        </div>
    </div>
    <div class="skw-page skw-page-5">
        <div class="skw-page__half skw-page__half--left">
            <div class="skw-page__skewed">
                <div class="skw-page__content"></div>
            </div>
        </div>
        <div class="skw-page__half skw-page__half--right">
            <div class="skw-page__skewed">
                <div class="skw-page__content">
                    <h2 class="skw-page__heading">Epic finale</h2>
                    <p class="skw-page__description">story the end!</p>
                </div>
            </div>
        </div>
    </div>
</div>

 

js部分：（此处需要引入jquery.js）

<<script type="text/javascript">
    $(document).ready(function () {
        var curPage = 1;
        var numOfPages = $('.skw-page').length;
        var animTime = 1000;
        var scrolling = false;
        var pgPrefix = '.skw-page-';
        function pagination() {
            scrolling = true;
            $(pgPrefix + curPage).removeClass('inactive').addClass('active');
            $(pgPrefix + (curPage - 1)).addClass('inactive');
            $(pgPrefix + (curPage + 1)).removeClass('active');
            setTimeout(function () {
                scrolling = false;
            }, animTime);
        }
        ;
        function navigateUp() {
            if (curPage === 1)
                return;
            curPage--;
            pagination();
        }
        ;
        function navigateDown() {
            if (curPage === numOfPages)
                return;
            curPage++;
            pagination();
        }
        ;
        $(document).on('mousewheel DOMMouseScroll', function (e) {
            if (scrolling)
                return;
            if (e.originalEvent.wheelDelta > 0 || e.originalEvent.detail < 0) {
                navigateUp();
            } else {
                navigateDown();
            }
        });
        $(document).on('keydown', function (e) {
            if (scrolling)
                return;
            if (e.which === 38) {
                navigateUp();
            } else if (e.which === 40) {
                navigateDown();
            }
        });
    });
</script>