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创建,至 ...
随机推荐
- C++ STL Maps
Maps定义 --> 个人理解为python的字典 C++ Maps are sorted associative containers the contian unique key/value ...
- 车小米O2O保养平台搭建完毕
www.51chexiaomi.com 无忧车小米上线了,开展上海地区的试运营
- Error: package or namespace load failed for ‘rJava’:
https://stackoverflow.com/questions/30738974/rjava-load-error-in-rstudio-r-after-upgrading-to-osx-yo ...
- C# byte[]保存成文件
string path = Server.MapPath(@"\a.pdf"); FileStream fs = new FileStream(path, FileMode.Cre ...
- 在Centos7下发布.NET CORE项目[转]
1.安装安装前准备开发环境 编译类库:yum -y install gcc make gcc-c++ openssl-devel 系统信息: CentOS Linux release 7.2.1511 ...
- HttpServletRequest修改/添加header和cookie参数
实现功能: 所有接口经过过滤器,获取每个接口的自定义头部(token) 判断如果是app访问,则给头部设置cookie,值为自定义token的值. 即:使用过滤器实现修改请求头headers 实现步骤 ...
- jsp连接mysql----------第一篇技术类文章
今天做作业连了一天的mysql. 最后我痛定思痛,决定从0開始学习jsp.省的又面临不会的局面. 忙活了一晚上.最终把数据库连接上了,只是.好伤心啊,我连个数据库都这么墨迹. . . <%@ p ...
- 史上最全的 Sublime Text 汉化、插件安装合集
0.前言 本文用于给新手小白用户指明前进方向.不用做商业推广. 其次,鼓舞购买正版.拒绝盗版. 好了.口号喊完,接下来就直接開始正文. 1. Sublime Text 介绍 首先在開始前,先来介绍一下 ...
- Hive性能分析和优化方法
Hive性能分析和优化方法 http://wenku.baidu.com/link?url=LVrnj-mD0OB69-eUH-0b2LGzc2SN76hjLVsGfCdYjV8ogyyN-BSja5 ...
- 关于Json-lib类库的使用
前言介绍: json-lib包是一个Java类库,它可以将Java对象(包括:beans,maps,collections,java arrays ,xml等)和JSON互相转换. 与此相同的是谷歌也 ...