zoukankan      html  css  js  c++  java
  • 鼠标滚动倾斜分割切换

    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>
  • 相关阅读:
    hdu 1593 find a way to escape
    bzoj4561: [JLoi2016]圆的异或并
    hdu 3511 Prison Break
    hdu 5299 Circles Game
    ORA-15025: could not open disk "/dev/asm***"--转载
    修改目的端trail文件的最大大小--转载
    MYSQL PERFORMANCE_SCHEMA HINTS
    Oracle 收缩表大小 Oracle Shrink Table --转载
    InnoDB: Error number 24 means ‘Too many open files’.--转载
    使用asmcmdcp命令把datafile从文件系统移动(move)到asm磁盘组中 针对11gR2
  • 原文地址:https://www.cnblogs.com/shanhaihong/p/5691250.html
Copyright © 2011-2022 走看看