手指向上滑动跳转页面的JQ方法

佚名 6年前 (2019-04-19) 随笔 1531人围观抢沙发百度已收录

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
        <script src="https://img.huiyiguanjia.com/CDNFile/jquery/jquery-2.1.2.min.js"></script>
    </head>

    <body style="background:pink;height:100vh;overflow:hidden;">
        <style>
            /*第一种样式 箭头向上滑动动画*/
            
            .arrow-box {
                position: fixed;
                bottom: -45px;
                left: 0;
                right: 0;
                margin: 0 auto;
                width: 50%;
                height: 90px;
                border-radius: 100%;
                background: rgba(255, 255, 255, .18);
                z-index: 900;
            }
            
            #array {
                z-index: 999;
                -webkit-animation: start 1.5s infinite ease-in-out;
                display: block;
                margin: 15px auto 0 auto;
                width: 20px;
                height: 15px;
                z-index: 999;
            }
            
            @-webkit-keyframes start {
                0% {
                    opacity: 0;
                    -webkit-transform: translate(0, 0);
                }
                70% {
                    opacity: 1;
                    -webkit-transform: translate(0, -40px);
                }
                100% {
                    opacity: 0;
                    -webkit-transform: translate(0, -40px);
                }
            }
            
            @-moz-keyframes start {
                0% {
                    opacity: 0;
                    -moz-transform: translate(0, 0px);
                }
                70% {
                    opacity: 1;
                    -moz-transform: translate(0, -40px);
                }
                100% {
                    opacity: 0;
                    -moz-transform: translate(0, -40px);
                }
            }
            
            @keyframes start {
                0% {
                    opacity: 0;
                    -webkit-transform: translate(0, 0);
                }
                70% {
                    opacity: 1;
                    -webkit-transform: translate(0, -40px);
                }
                100% {
                    opacity: 0;
                    -webkit-transform: translate(0, -40px);
                }
            }
            /*第二种样式 手指上滑动画*/
            
            .arrow {
                position: fixed;
                bottom: 5%;
                right: 7%;
            }
            
            .hande {
                position: absolute;
                width: 30px;
                top: 33%;
                left: -7px;
                -webkit-animation: start 2s ease 0s infinite forwards;
                animation: start 2s ease 0s infinite forwards;
                z-index: 150;
            }
            
            .up {
                width: 14px;
                -webkit-animation: up 2s ease 0s infinite forwards;
                animation: up 2s ease 0s infinite forwards;
            }
            
            @-webkit-keyframes start {
                0% {
                    opacity: 0;
                    -webkit-transform: translate(0, 0);
                }
                70% {
                    opacity: 1;
                    -webkit-transform: translate(0, -40px);
                }
                100% {
                    opacity: 0;
                    -webkit-transform: translate(0, -40px);
                }
            }
            
            @-moz-keyframes start {
                0% {
                    opacity: 0;
                    -moz-transform: translate(0, 0px);
                }
                70% {
                    opacity: 1;
                    -moz-transform: translate(0, -40px);
                }
                100% {
                    opacity: 0;
                    -moz-transform: translate(0, -40px);
                }
            }
            
            @keyframes start {
                0% {
                    opacity: 0;
                    -webkit-transform: translate(0, 0);
                }
                70% {
                    opacity: 1;
                    -webkit-transform: translate(0, -40px);
                }
                100% {
                    opacity: 0;
                    -webkit-transform: translate(0, -40px);
                }
            }
            
            @-webkit-keyframes up {
                0% {
                    opacity: 1;
                }
                100% {
                    opacity: 0.8;
                }
            }
            
            @-moz-keyframes up {
                0% {
                    opacity: 1;
                }
                100% {
                    opacity: 0.8;
                }
            }
            
            @keyframes up {
                0% {
                    opacity: 1;
                }
                100% {
                    opacity: 0.8;
                }
            }
            
            @keyframes Flash {
                0%,
                100%,
                50% {
                    opacity: 1;
                }
                25%,
                75% {
                    opacity: 0.7;
                }
            }
            
            @-webkit-keyframes Flash {
                0%,
                100%,
                50% {
                    opacity: 1;
                }
                25%,
                75% {
                    opacity: 0.7;
                }
            }
        </style>
        <!-- 底部引导下滑动画 -->
        <!--第一种样式-->
        <div class="arrow-box">
            <img src="https://html.huiyiguanjia.com/custom/201809Qilinweilai/img/arrow.png" id="array">
        </div>
        <!--第二种样式-->
        <div class="arrow wow fadeIn" data-wow-duration="2s" data-wow-delay="6s">
            <div class="up">
                <img src="https://html.huiyiguanjia.com/custom/201807WANDA/img/up.png">
            </div>
            <div class="hande">
                <img src="https://html.huiyiguanjia.com/custom/201807WANDA/img/hande.png">
            </div>
        </div>
    </body>

</html>
<script>
    $(function() {
        $('body').on('touchstart', function(e) {
            var touch = e.originalEvent,
                startX = touch.changedTouches[0].pageX;
            startY = touch.changedTouches[0].pageY;
            $('body').on('touchmove', function(e) {
                touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0];
                if(touch.pageY - startY < -10) {
                    console.log("上划");
                    $('body').off('touchmove');
                    location.href = "index2.html";
                };
            });
            return false;
        }).on('touchend', function() {
            $('body').off('touchmove');
        });

    })
</script>