手指向上滑动跳转页面的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 ...
随机推荐
- Pycharm2018永久破解的办法
Pycharm2018永久破解的具体步骤: 一.下载pycharm2018专业版 JetBrains官网:https://www.jetbrains.com/pycharm/download/#sec ...
- SmartCode 使用常见问题
SmartCode 常见问题 SmartCode 能干什么? SmartCode = IDataSource -> IBuildTask -> IOutput => Build Ev ...
- 浅谈SQL Server内部运行机制
对于已经很熟悉T-SQL的读者,或者对于较专业的DBA来说,逻辑的增删改查,或者较复杂的SQL语句,都是非常简单的,不存在任何挑战,不值得一提,那么,SQL的哪些方面是他们的挑战 或者软肋呢? 那就是 ...
- SpringBoot整合系列--整合MyBatis-plus
原创作品,可以转载,但是请标注出处地址:https://www.cnblogs.com/V1haoge/p/10125279.html SpringBoot整合MyBatis-plus 步骤 第一步: ...
- CMD命令讲解（一）SC
参考网站:https://technet.microsoft.com/en-us/library/bb490995.aspx 备注:网站内容是翻译得来,源网站在上面 SC 与服务控制器和已安装的服务进 ...
- Spring Cloud 微服务开发系列整理
Spring Boot 系列精选 Spring Boot 自定义 starter Spring Boot 整合 mybatis-plus Spring Boot 整合 spring cache Spr ...
- Ubuntu16.04下OpenCV调用笔记本摄像头
1,新建一个test.cpp文件,插入下列代码,保存 #include<opencv2/opencv.hpp> #include<iostream> using namespa ...
- 【Android】用Cubism 2制作自己的Live2D——官方App样例源码学习(2)！
前言- 明确了项目目录的结构,但是结构什么的也太"抽象"了. 本篇开始上代码! 模型的绘制- 前几天的学习中,live2d的绘制有了一些了解了,在Android端使用OpenGL ...
- 关于写作那些事之利用 js 统计各大博客阅读量
在日常文章数据统计的过程中,纯手动方式已经难以应付,于是乎,逐步开始了程序介入方式进行统计. 在上一节中,探索利用 csv 文件格式进行文章数据统计,本来以为能够应付一阵子,没想到仅仅一天我就放弃了. ...
- 关于写作那些事之github告诉我构建失败,然后呢?
The page build failed for the master branch with the following error 问题描述 看到这封邮件,一脸懵逼,本地运行 gitbook 服 ...