/*判断上下滑动:*/
$('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. 关于Unity中的光照(三)

    法线贴图 次时代游戏用的比较多 1:法线贴图是凹凸贴图技术上 的一种应用,有时也称为Dot3(仿立体)凹凸纹理贴图;2: 法线贴图是不增加多边形的情况下,增强模型的细节;3: 法线贴图是高精度模型导出 ...

  2. ajax实现模糊查询完成列表信息显示

    之前遗留一个老问题:列表模糊查询,用的直接是form提交,点击搜索按扭后,页面刷新,搜索框中关键词就没了,这鸡肋的体验,我发誓一定要搞定它 但是鉴于自己写代码是纯粹玩票,我写代码没有目标,只有在当前工 ...

  3. Wifi 评分机制分析

    从android N开始,引入了wifi评分机制,选择wifi的时候会通过评分来选择. android O源码 frameworks\opt\net\wifi\service\java\com\and ...

  4. e566. 关闭的时候关闭程序

    By default, when the close button on a frame is clicked, nothing happens. This example shows how to ...

  5. 嵌入式开发之zynq——zynq开发环境搭建

    http://blog.csdn.net/shushm/article/details/51728690 http://www.cnblogs.com/fpga/p/4593602.html http ...

  6. Visual Studio Code自动识别编码

    将设置中的"files.autoGuessEncoding"项的值改为true即可. 详情请转知乎:https://www.zhihu.com/question/34415763

  7. Oracle RAC集群资料收集

    RAC优势和劣势 http://tech.it168.com/a2012/0814/1384/000001384756_all.shtml 双机热备与RAC并行模式对比 WAS数据源设置 http:/ ...

  8. This kernel requires an x86-64 CPU, but only detected an i686 CPU.

    为了运行一款软件,我也是拼了.彻底的玩了一次,因为A需要B,我去下载B,结果B又需要C,我去下载C,结果……怎一个艰难了得.最关键的是,目前还没有达到目的!!! 先记录下过程,有时间再来一遍,也许我已 ...

  9. Linux环境下Redis安装配置步骤[转]

    在LInux下安装Redis的步骤如下: 1.首先下载一个Redis安装包,官网下载地址为:https://redis.io/ 2.在Linux下解压redis: tar -zxvf redis-2. ...

  10. 通过tarball形式安装HBASE Cluster(CDH5.0.2)——如何配置分布式集群中的zookeeper

    集群安装总览参见这里 Zookeeper的配置 1,/etc/profile中加入zk的路径设置,见上面背景说明. 2,进入~/zk/conf目录,复制zoo_sample.cfg为zoo.cfg v ...