web移动前端页面,jquery判断页面滑动方向
/*判断上下滑动:*/
$('body').bind('touchstart',function(e){
startX = e.originalEvent.changedTouches[0].pageX;
startY = e.originalEvent.changedTouches[0].pageY;
});
$("body").bind("touchmove",function(e){
//获取滑动屏幕时的X,Y
endX = e.originalEvent.changedTouches[0].pageX;
endY = e.originalEvent.changedTouches[0].pageY;
//获取滑动距离
distanceX = endX-startX;
distanceY = endY-startY;
//判断滑动方向
if(Math.abs(distanceX)>Math.abs(distanceY) && distanceX>0){
console.log('往右滑动');
}else if(Math.abs(distanceX)>Math.abs(distanceY) && distanceX<0){
console.log('往左滑动');
}else
if(Math.abs(distanceX)<Math.abs(distanceY) && distanceY<0){
console.log('往上滑动');
} else if(Math.abs(distanceX)<Math.abs(distanceY) && distanceY>0){
console.log('往下滑动'); }
});
web移动前端页面,jquery判断页面滑动方向的更多相关文章
- jquery判断手指滑动方向
jquery判断手指滑动方向 <pre> /*判断哪个滑动方向还是自己改下 要么上下 要么左右*/ var startX; var startY; $(".shanghua&qu ...
- jquery 判断手势滑动方向(上下左右)
$('body').on('click', '.placeholder img', function(e) { //touchstart在你之前发生,不管些什么,都先执行下面的 }); $('body ...
- 对于移动端浏览器touch事件的研究总结(4)判断手指滑动方向
最近有一些微信的项目,虽然页面很简单,但配合手势后的效果却是很不错的.最基本的效果就是手指向上滑,页面配合css3出现一个展开效果,手指向下滑将展开的内容按原路径收起.其实就是一个简单的判断手指滑动方 ...
- 《移动端浏览器Touch事件判断手指滑动方向方法》
$("body").on("touchstart", function(e) { e.preventDefault(); startX = e. ...
- [jquery]判断页面滚动到顶部和底部(适用于手机web加载)
//判断页面滚动到顶部和底部 $(window).scroll(function(){ var doc_height = $(document).height(); var scroll_top = ...
- jquery判断页面网址是否有效
方法一:(jQuery方法: 适用所有浏览器) HTML页面: <!DOCTYPE html><html><head lang="en"> &l ...
- jQuery 判断页面元素是否存在的代码
在原生的Javascript里,当我们对某个页面元素进行某种操作前,最好先判断这个元素是否存在.原因是对一个不存在的元素进行操作是不允许的. 例如: document.getElementById(& ...
- jquery判断页面元素是否存在
在传统的Javascript里,当我们对某个页面元素进行某种操作前,最好先判断这个元素是否存在.原因是对一个不存在的元素进行操作是不允许的. 例如: document.getElementById(& ...
- 第四篇:web之前端之jquery
前端之jquery 前端之jquery 本节内容 jquery简介 选择器和筛选器 操作元素 示例 1. jquery简介 1 jquery是什么 jQuery由美国人John Resig创建,至 ...
随机推荐
- thinkphp 无限极分类的数据库设计及效果测试
控制器继承IndexAction.class.php <?php // 本类由系统自动生成,仅供测试用途 class IndexAction extends CateAction { } ?&g ...
- Axiom3D:资源引用与加载基本流程.
Archive:对应文件夹位置,包含文件夹,压缩文件,网络位置,包含Load,Unload,Open,Create,Remove,FineFile等主要虚方法,用于对应各具体Archive来实现. R ...
- python 调用pymysql模块遇到\转义问题解决办法
1.问题情况 本来存入mysql的是字典,有汉字,由于python版本是2.7,所以在json的时候把我的值变成了unicode,那么在调用pymysql的时候,mysql给我转义取消了. 存之前: ...
- java-selenium下载百度图片
package download; import java.io.DataInputStream; import java.io.File; import java.io.FileOutputStre ...
- HttpComponents-Client学习
HttpComponents-Client 学习 官方文档:http://hc.apache.org/httpcomponents-client-ga/tutorial/html/index.html ...
- Linux中的绝对路径和相对路径
一.介绍 1,文件路径 什么是文件的路径? 答:这个文件存放的地方,可以联想为 文件的“家”. 在Linux中,存在着绝对路径和相对路径 绝对路径:路径的写法一定是由根目录 / 写起的,例如 /usr ...
- PHP进阶。
老手段,百度“PHP进阶” 不过,今天运气不错,搜到一个“PHP特级内容讲解”,地址是:http://wenku.baidu.com/course/view/fd8e591b6bd97f192279e ...
- QtCore.QMetaObject.connectSlotsByName:根据objectName和signal自动绑定slot
from PyQt5.QtWidgets import (QWidget , QVBoxLayout , QHBoxLayout, QLineEdit, QPushButton) from PyQt5 ...
- Linux环境安装PostgreSQL-10.1[转]
环境及资源 Linux版本:CentOS release 6.5 PostgresSQL版本:postgresql-10.1 PostgreSQL官网下载地址:https://www.postgres ...
- thinkphp中的类库与引用import引入机制
ThinkPHP的类库包括基类库和应用类库 控制器类 模块名+Action 例如 UserAction.InfoAction 模型类 模型名+Model 例如 UserModel.InfoModel ...