/*判断上下滑动:*/
$('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判断页面滑动方向的更多相关文章

  1. jquery判断手指滑动方向

    jquery判断手指滑动方向 <pre> /*判断哪个滑动方向还是自己改下 要么上下 要么左右*/ var startX; var startY; $(".shanghua&qu ...

  2. jquery 判断手势滑动方向(上下左右)

    $('body').on('click', '.placeholder img', function(e) { //touchstart在你之前发生,不管些什么,都先执行下面的 }); $('body ...

  3. 对于移动端浏览器touch事件的研究总结(4)判断手指滑动方向

    最近有一些微信的项目,虽然页面很简单,但配合手势后的效果却是很不错的.最基本的效果就是手指向上滑,页面配合css3出现一个展开效果,手指向下滑将展开的内容按原路径收起.其实就是一个简单的判断手指滑动方 ...

  4. 《移动端浏览器Touch事件判断手指滑动方向方法》

    $("body").on("touchstart", function(e) {     e.preventDefault();     startX = e. ...

  5. [jquery]判断页面滚动到顶部和底部(适用于手机web加载)

    //判断页面滚动到顶部和底部 $(window).scroll(function(){ var doc_height = $(document).height(); var scroll_top = ...

  6. jquery判断页面网址是否有效

    方法一:(jQuery方法: 适用所有浏览器) HTML页面: <!DOCTYPE html><html><head lang="en"> &l ...

  7. jQuery 判断页面元素是否存在的代码

    在原生的Javascript里,当我们对某个页面元素进行某种操作前,最好先判断这个元素是否存在.原因是对一个不存在的元素进行操作是不允许的. 例如: document.getElementById(& ...

  8. jquery判断页面元素是否存在

    在传统的Javascript里,当我们对某个页面元素进行某种操作前,最好先判断这个元素是否存在.原因是对一个不存在的元素进行操作是不允许的. 例如: document.getElementById(& ...

  9. 第四篇:web之前端之jquery

    前端之jquery   前端之jquery 本节内容 jquery简介 选择器和筛选器 操作元素 示例 1. jquery简介 1 jquery是什么 jQuery由美国人John Resig创建,至 ...

随机推荐

  1. jQuery AJAX中文乱码处理

    最近工作中用jQuery ajax返回出现乱码,用的Notepad++编辑器,当JS部分传递中文时,另一页面接收的话会出现乱码,在网上找了很多方法,基本上没有很好的解决. 页面用GB2312编码,JS ...

  2. SAP 以工序为基准进行发料 机加工行业 Goods Issue to Routing

    SAP 以工序为基准进行发料   这个流程是在业务有关需求,业务需要按照工序发料,一个工单有多个工序,而料是要发到每个工序上,而且没到工序之间在物理上是有距离的,所以仓管员在打印配发单之后希望了解到哪 ...

  3. checkbox批量删除功能

    参考:http://www.jb51.net/article/35338.htm 感谢作者 代码片段:jsp <c:forEach items="${infolist }" ...

  4. 解决maven jmxtools 缺失的问题

    原因:有版权,所以maven仓库基本都下架了jmxtool. 目前可用的,我就找到了wso2这家,配置如下: <project xmlns="http://maven.apache.o ...

  5. Mysql 8.0.11版本,安装成功,使用Navicat连接失败。

    Note:本文只针对mac!! 问题 安装mysql成功之后,想自己弄个数据库试试,但是报错.并不是错误代号,而是一段代码: Authentication plugin 'caching_sha2_p ...

  6. zabbix server端自动发现和zabbix agent端自动注册

    一.zabbix自动发现 利用zabbix的discovery功能可以实现自动批量添加主机的功能. Zabbix自动发现实现自定义主机名: 通过自动发现添加的客户端主机的Host name 是以IP地 ...

  7. 使用iftop监控网卡实时流量

    Iftop工具主要用来显示本机网络流量情况及各相互通信的流量集合,如单独同哪台机器间的流量大小,非常适合于代理服务器和iptables服务器使用,这样可以方便的查看各客户端流量情况.iftop可以在类 ...

  8. AMQ5540, AMQ5541 and AMQ5542, application did not supply a user ID and password, 2035 MQRC_NOT_AUTHORIZED

    Technote (troubleshooting) Problem(Abstract) As an MQ administrator you create a new queue manager i ...

  9. LAMP一体环境快速安装

    (一)安装Apache 1.下载安装 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 yum install zlib-devel -y wget http://m ...

  10. Xcode - 升级后模拟器无法响应电脑键盘

    链接 Q: I used to be able to type with my real mac keyboard after launching the iPhone Simulator. Typi ...