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创建,至 ...
随机推荐
- 相似变换 SimilarityTransform 以及skimage源码
http://scikit-image.org/docs/dev/api/skimage.transform.html#skimage.transform.SimilarityTransform ht ...
- 捋一捋Spring Web的源码思路
Servlet前提 Java规定了Servlet Container为每一个web app创建一个Servlet Context:而Servlet Context中又包含了诸多Servlet -- 其 ...
- 【吉比特】G-bits2018校园春季招聘技术类岗位笔试经验
笔试公司:厦门吉比特网络技术股份有限公司 笔试岗位:游戏研发工程师 笔试时间:2018年3月30日19:00-20:30 笔试形式:牛客网在线做题 笔试回忆: 笔试总共时长1小时半,共52道题.其中选 ...
- JDBC事务保存点(setSavepoint, releaseSavepoint )实例
以下是使用事务教程中描述的setSavepoint和回滚的代码示例. 此示例代码是基于前面章节中完成的环境和数据库设置编写的. 复制并将以下示例代码保存到:JDBCSavepoint.java 中,编 ...
- Python——eventlet.hubs
Hub构成了 Eventlet 的事件循环,它分发 I/O 事件.调度 greenthread.Hub的存在使得协程被提升为 greenthreads. Eventlet 有多种hub的实现,所以在使 ...
- zabbix 服务器设置邮件报警
实验条件: Zabbix监控服务器.客户端都已经部署完成,被监控主机已添加完成,Zabbix监控运行正常. 实现目的: Zabbix监控服务器设置邮件报警,当被监控主机宕机或达到触发器预设值进,会自动 ...
- php 字符串 以 开头 以结尾 startWith endWith
From: http://www.shipingzhong.cn/node/1217 //第一个是原串,第二个是 部份串function startWith($str, $needle) { retu ...
- TensorFlow-tensorboard可视化
运行了很多次出现错误,错误原因在于运行tensorboard时,需要退出python编辑
- 使用 Python 解数学方程
SymPy是符号数学的Python库.它的目标是成为一个全功能的计算机代数系统,同时保持代码简洁.易于理解和扩展 服务器Ubuntu 1.安装Python 2.安装SymPy库 sudo pip in ...
- 图像添加到ABBYY 文档有什么方法
ABBYY FineReader 12作为一款功能全面的OCR图文识别软件,我们自是可以在其中将图像添加到FineReader文档中去,且添加在文档尾部,否则将会创建一个新的FineReader文档. ...