手指向上滑动跳转页面的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 ...
随机推荐
- 卷积神经网络 CNN 学习笔记
激活函数Relu 最近几年卷积神经网络中,激活函数往往不选择sigmoid或tanh函数,而是选择relu函数.Relu函数的定义 $$f(x)= max(0,x)$$ Relu函数图像如下图所示: ...
- [开源]WinForm 控件使用总结
背景 都2019年了,还在用WinForm吗?哈哈,其实我也没在用,都是很多年前一些项目积累,所以代码写的有些屎,之所以开源出来,希望能给大家有所帮助,喜欢的话给 一个Star以资鼓励~: 具体代码: ...
- 【Javascript】JS遍历数组的三种方法：map、forEach、filter
前言 近一段时间,因为项目原因,会经常在前端对数组进行遍历.处理,JS自带的遍历方法有很多种,往往不加留意,就可能导致知识混乱的现象,并且其中还存在一些坑.前端时间在ediary中总结了js原生自带的 ...
- 简单介绍shell编程四剑客之awk
概要:分别的作用 grep:文本过滤(模式:pattern)工具,grep,egrep,fgrep,擅长过滤. sed:stream editor 文本编辑工具:(流编辑器),擅长取行.替换. awk ...
- 第一册：lesson 113.
原文:Small changes. question:Who has got some small changes? Fares,please! Trafalgar Square,please. I' ...
- [orleans2.1]这是你没玩过的船新版本
不知不觉orleans就发布到2.1版本的,但是说也奇怪orleans越是完善我发现园子相关的博客就越少,大概是大佬都在美滋滋用在生产环境,不屑于玩demo了吧. 但是小弟不才还是只会玩demo,所以 ...
- 我爱Java系列之《JavaEE面试宝典》---【IO流面试总结】
1.什么是比特(Bit),什么是字节(Byte),什么是字符(Char),它们长度是多少,各有什么区别 答案 Bit最小的二进制单位 ,是计算机的操作部分 取值0或者1 Byte是计算机操作数据的最小 ...
- 【RL-TCPnet网络教程】第2章 嵌入式网络协议栈基础知识
第2章 嵌入式网络协议栈基础知识 本章教程为大家介绍嵌入式网络协议栈基础知识,本章先让大家有一个全面的认识,后面章节中会为大家逐一讲解用到的协议. 基础知识整理自百度百科,wiki百科等 ...
- centos7的主机名配置
centos7的主机名配置 方法一:通过配置文件/etc/hostname (重启后生效) 方法二:通过命令hostnamectl set-hostname 新主机名(会自动把主机名改为小写) ...
- ASP.NET学习笔记 —— 一般处理程序之图片上传
简单图片上传功能目标:实现从本地磁盘读取图片文件,展示到浏览器页面.步骤:(1). 首先创建一个用于上传图片的HTML模板,命名为ImageUpload.html: <!DOCTYPE html ...