手指向上滑动跳转页面的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 <) {
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);
手指向上滑动跳转页面的JQ方法的更多相关文章
- JS魔法堂:定义页面的Dispose方法——[before]unload事件启示录
前言 最近实施的同事报障,说用户审批流程后直接关闭浏览器,操作十余次后系统就报用户会话数超过上限,咨询4A同事后得知登陆后需要显式调用登出API才能清理4A端,否则必然会超出会话上限. 即使在页面 ...
- 定义页面的Dispose方法：[before]unload事件启示录
前言 最近实施的同事报障,说用户审批流程后直接关闭浏览器,操作十余次后系统就报用户会话数超过上限,咨询4A同事后得知登陆后需要显式调用登出API才能清理4A端,否则必然会超出会话上限. 即使在页面上增 ...
- python抽取指定url页面的title方法
python抽取指定url页面的title方法 今天简单使用了一下python的re模块和lxml模块,分别利用的它们提供的正则表达式和xpath来解析页面源码从中提取所需的title,xpath在完 ...
- WebBrowser之获取跳转页面的Document接口源码
问题由来是这样的,今天帮一个网友解决问题,说从VC驿站下载了一个源码,程序的功能主要是在对话框上面放置了一个WebBrowser控件,程序启动的时候默认调用这句代码: m_web.Navigate(_ ...
- 模式窗体中调用父页面js与非模式化调用非父页面的js方法
最近项目中使用模式窗体,遇到以下问题记录一下: 模式窗体:你必须关闭该窗体,才能操作其它窗体:比如说,必须按确定或取消,或者按关闭. 非模式窗体:不必关闭该窗体,就可转换到其它窗体上进行操作. 一:非 ...
- 调用上一个页面的js方法
点击商品分类,弹出下框 点击确定,将选中的类别的name和唯一的code返回到上个页面 function save(){ var ids = getIdSelections(); jp.get(&qu ...
- uni-app 手指左右滑动实现翻页效果
首先给页面添加 touch 事件 <view class="text-area" @touchstart="start" @touchend=" ...
- JS 在open打开的子窗口页面中调用父窗口页面的JS方法
需求的情景如下: 1:做新增或修改等操作的时候打开一个新的浏览器窗口(使用window.open(参数等)方法) 2:在新增或修改等的页面上有返回按钮.重置按钮.保存按钮,对于返回就直接关闭此窗口(使 ...
- Phalcon处理404页面的 Ruter 方法
/** * Initializes the router * * @param array $options */ protected function initRouter($options = a ...
随机推荐
- windows系统下用python更新svn和Git
转载请标明出处:http://www.cnblogs.com/zblade/ 最近在思考怎么实现python的一键打包,利用python的跨平台特性,可以实现在windows和mac下均可执行的特点. ...
- 自定义GridControl编辑器
本文版权归博主 惊梦无痕 所有,欢迎转载,但须保留此段声明,并给出原文链接,谢谢合作.SourceLink 鉴于网上的针对GridControl的一些代码比较凌乱,且功能分散,故将整理过的代码分享出来 ...
- Flutter 即学即用系列博客——03 在旧有项目引入 Flutter
前言 其实如果打算在实际项目中引入 Flutter,完全将旧有项目改造成纯 Flutter 项目的可能性比较小,更多的是在旧有项目引入 Flutter. 因此本篇我们就说一说如何在旧有项目引入 Flu ...
- 用tornado实现图片标记
背景介绍 在文章Keras入门(四)之利用CNN模型轻松破解网站验证码中,其中的验证码图片标记是采用tornado实现的网页实现的.本文将会讲述如何利用tornado来实现图片标记. 我们的示 ...
- 前端知识复习： JS选中变色
前端知识复习:JS选中变色 上篇文章 :前端知识复习:Html DIV 图文混排(文字放在图片下边) Js选中图片效果 <!DOCTYPE html> <html xmlns=&qu ...
- oracle数据库导出表结构步骤
导出完成后在状态栏中显示Find
- iframe中的a标签电话链接不能正常打开
背景 经测试,android手机中没有这个问题, iphone手机中的Safari浏览器会出现这个问题. 例如: <a href = "tel://1-408-555-5555&quo ...
- git报错
-Initial commit Untracked files nothing added to commit but untracked 代码并没有被成功提交,看信息是文件没有被tracked gi ...
- 深圳市共创力咨询CEO杨学明的最新演讲：互联网模式下的企业创新管理
2018年11月14日, 深圳市共创力咨询董事长.深圳市汇成研发管理咨询公司董事长杨学明先生受邀参加由深圳图书馆主办,深圳手讯视频承办的“倾听行业之声”2018第二届世界CED智慧大会,此次分享的主题 ...
- matplotlib正弦和余弦图
代码: # -*- coding: utf-8 -*- """ Created on Thu Jul 12 16:37:47 2018 @author: zhen &qu ...