/*判断上下滑动:*/
$('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. C++ STL Maps

    Maps定义 --> 个人理解为python的字典 C++ Maps are sorted associative containers the contian unique key/value ...

  2. 车小米O2O保养平台搭建完毕

    www.51chexiaomi.com 无忧车小米上线了,开展上海地区的试运营

  3. Error: package or namespace load failed for ‘rJava’:

    https://stackoverflow.com/questions/30738974/rjava-load-error-in-rstudio-r-after-upgrading-to-osx-yo ...

  4. C# byte[]保存成文件

    string path = Server.MapPath(@"\a.pdf"); FileStream fs = new FileStream(path, FileMode.Cre ...

  5. 在Centos7下发布.NET CORE项目[转]

    1.安装安装前准备开发环境 编译类库:yum -y install gcc make gcc-c++ openssl-devel 系统信息: CentOS Linux release 7.2.1511 ...

  6. HttpServletRequest修改/添加header和cookie参数

    实现功能: 所有接口经过过滤器,获取每个接口的自定义头部(token) 判断如果是app访问,则给头部设置cookie,值为自定义token的值. 即:使用过滤器实现修改请求头headers 实现步骤 ...

  7. jsp连接mysql----------第一篇技术类文章

    今天做作业连了一天的mysql. 最后我痛定思痛,决定从0開始学习jsp.省的又面临不会的局面. 忙活了一晚上.最终把数据库连接上了,只是.好伤心啊,我连个数据库都这么墨迹. . . <%@ p ...

  8. 史上最全的 Sublime Text 汉化、插件安装合集

    0.前言 本文用于给新手小白用户指明前进方向.不用做商业推广. 其次,鼓舞购买正版.拒绝盗版. 好了.口号喊完,接下来就直接開始正文. 1. Sublime Text 介绍 首先在開始前,先来介绍一下 ...

  9. Hive性能分析和优化方法

    Hive性能分析和优化方法 http://wenku.baidu.com/link?url=LVrnj-mD0OB69-eUH-0b2LGzc2SN76hjLVsGfCdYjV8ogyyN-BSja5 ...

  10. 关于Json-lib类库的使用

    前言介绍: json-lib包是一个Java类库,它可以将Java对象(包括:beans,maps,collections,java arrays ,xml等)和JSON互相转换. 与此相同的是谷歌也 ...