手指向上滑动跳转页面的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 ...
随机推荐
- Python爬虫实例：爬取猫眼电影——破解字体反爬
字体反爬 字体反爬也就是自定义字体反爬,通过调用自定义的字体文件来渲染网页中的文字,而网页中的文字不再是文字,而是相应的字体编码,通过复制或者简单的采集是无法采集到编码后的文字内容的. 现在貌似不少网 ...
- 104 - kube-scheduler源码分析 - predicate整体流程
(注:从微信公众:CloudGeek复制过来,格式略微错乱,更好阅读体验请移步公众号,二维码在文末) 今天我们来跟一下predicates的整个过程:predicate这个词应该是“断言.断定”的意思 ...
- Spring Boot使用Spring Data Jpa对MySQL数据库进行CRUD操作
只需两步!Eclipse+Maven快速构建第一个Spring Boot项目 构建了第一个Spring Boot项目. Spring Boot连接MySQL数据库 连接了MySQL数据库. 本文在之前 ...
- 第66章 视频 - Identity Server 4 中文文档(v1.0.0)
第66章 视频 66.1 2019 January [NDC] - 使用ASP.NET Core 2.2和3.0保护Web应用程序和API 1月[NDC] - 为基于OpenID Connect / ...
- 分布式缓存Hazelcast案例一
分布式缓存Hazelcast案例一 Hazelcast IMDG Architecture 今天先到这儿,希望对您技术领导力, 企业管理,物联网, 系统架构设计与评估,团队管理, 项目管理, 产品管 ...
- Keepalived 的使用
1.什么是keepalived Keepalived的作用是检测web服务器的状态,如果有一台web服务器死机,或工作出现故障,Keepalived将检测到,并将有故障的web服务器从系统中剔除,当w ...
- HTML/CSS快速入门
Web概念 JavaWeb 使用java语言开发基于互联网的项目 软件架构 C/S架构:Client/Server 客户端/服务器 用户本地有一个客户端程序,在远程有一个服务端程序 如QQ,英雄联盟. ...
- SQLServer之删除用户定义的数据库角色
删除用户定义的数据库角色注意事项 无法从数据库删除拥有安全对象的角色. 若要删除拥有安全对象的数据库角色,必须首先转移这些安全对象的所有权,或从数据库删除它们. 无法从数据库删除拥有成员的角色. 若要 ...
- Video clip 视频剪辑：入门级
作为一个对小说漫画电视剧电影的设计有着自己独特需求的人,一直对视频剪辑有着浓厚的兴趣,之前用爱剪辑这种通俗易上手的软件做过简单的小视频.但是这个毕竟满足不了我自己的需求而且属于完全门外汉级别.这次终于 ...
- 记录Javascript集合操作
function Set() { var items = {}; /** * 添加元素 * @param {[type]} value [description] */ this.add = func ...