手指向上滑动跳转页面的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 ...
随机推荐
- 点击菜单选项，右侧主体区新增子界面（Tab）的实现
今天是2019年小年后一天,还有三天回家过年. 今天记录一下一种前端页面的效果的实现,这种效果很常见,一般用于网站后台系统的前端页面.一般后台系统会分为顶部导航栏,左边的菜单栏和右边的主体区.有一种效 ...
- winform登录功能
private void btnLogin_Click(object sender, EventArgs e) { string username = txtUserName.Text; string ...
- 数据结构——Java实现顺序表
一.分析 什么是顺序表?顺序表是指用一组地址连续的存储单元依次存储各个元素,使得在逻辑结构上相邻的数据元素存储在相邻的物理存储单元中的线性表.一个标准的顺序表需要实现以下基本操作: 1.初始化顺序表 ...
- 委托的多线程方法BeginInvoke
同步方法和异步方法: 同步方法调用在程序继续执行之前需要等待同步方法执行完毕返回结果.(比如烧水泡茶,需要等水烧开了才能继续泡茶) 异步方法则在被调用之后立即返回以便程序在被调用方法完成其任务的同时执 ...
- java基础（一）：谈谈java内存管理与垃圾回收机制
看了很多java内存管理的文章或者博客,写的要么笼统,要么划分的不正确,且很多文章都千篇一律.例如部分地方将jvm笼统的分为堆.栈.程序计数器,这么分太过于笼统,无法清晰的阐述java的内存管理模型: ...
- Where Can I Download Full Installers for WebLogic Server
Where can I download full installers for the different versions of WebLogic Server (WLS)? Full insta ...
- 一起学Android之ViewPager
本文以一个简单的小例子,简述在Android开发中ViewPager的常见用法,仅供学习分享使用. 概述 ViewPager是一个支持使用者左右滑动的布局管理控件,可以通过一个实现的(适配器)Page ...
- Linux系统上Nginx服务器的安装与配置
前言: 详细步骤移步菜鸟教程 一. 安装Nginx,注意虚拟机与宿主机的网络连通性 l 安装编译工具及库文件(zlib库. ssl) yum -y install make zlib zlib-de ...
- 【English】十一、一般疑问句
一.一般疑问句定义 参考:英语语法中的一般疑问句和特殊疑问句的区别 英语一般疑问句句型结构 能用yes / no(或相当于yes / no)回答的问句. 二.一般疑问句的句子结构,三种 be动词: ...
- Win10 Ubuntu子系统运行32bit Linux原生程序
本文主要描述的是:解决 Win10 Ubuntu子系统中运行 32bit Linux原生程序 报错 Exec format error . 问题来源于 在 Win10 Ubuntu子系统中运行 ...