手指向上滑动跳转页面的JQ方法
<!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>
以下代码是JQ的第二种方法：在全屏任何地方上划都可以跳转页面
var startx, starty; //获得角度 function getAngle(angx, angy) { return Math.atan2(angy, angx) * 180 / Math.PI; }; //根据起点终点返回方向 1向上 2向下 3向左 4向右 0未滑动 function getDirection(startx, starty, endx, endy) { var angx = endx - startx; var angy = endy - starty; var result = 0; //如果滑动距离太短 if(Math.abs(angx) < 2 && Math.abs(angy) < 2) { return result; } var angle = getAngle(angx, angy); if(angle >= -135 && angle <= -45) { result = 1; } else if(angle > 45 && angle < 135) { result = 2; } else if((angle >= 135 && angle <= 180) || (angle >= -180 && angle < -135)) { result = 3; } else if(angle >= -45 && angle <= 45) { result = 4; } return result; } //手指接触屏幕 document.addEventListener("touchstart", function(e) { startx = e.touches[0].pageX; starty = e.touches[0].pageY; }, false); //手指离开屏幕 document.addEventListener("touchend", function(e) { var endx, endy; endx = e.changedTouches[0].pageX; endy = e.changedTouches[0].pageY; var direction = getDirection(startx, starty, endx, endy); switch(direction) { case 0: //alert("未滑动！"); break; case 1: //alert("向上！") location.href = "baom.html" break; case 2: //alert("向下！") break; case 3: //alert("向左！") break; case 4: //alert("向右！") break; default: } }, false);
是我吖~
