jquery判断手指滑动方向

<pre>
/*判断哪个滑动方向还是自己改下 要么上下 要么左右*/
var startX;
var startY;
$(".shanghua").on("touchstart", function(e) {
// 判断默认行为是否可以被禁用
if (e.cancelable) {
// 判断默认行为是否已经被禁用
if (!e.defaultPrevented) {
e.preventDefault();
}
}
startX = e.originalEvent.changedTouches[0].pageX;
startY = e.originalEvent.changedTouches[0].pageY;
console.log('startX:' + startX);
console.log('startY:' + startY);
});
$(".shanghua").on("touchend", function(e) {
// 判断默认行为是否可以被禁用
if (e.cancelable) {
// 判断默认行为是否已经被禁用
if (!e.defaultPrevented) {
e.preventDefault();
}
}
var moveEndX = e.originalEvent.changedTouches[0].pageX;
var moveEndY = e.originalEvent.changedTouches[0].pageY;
console.log('moveEndX:' + moveEndX);
console.log('moveEndY:' + moveEndY);
var X = moveEndX - startX;
var Y = moveEndY - startY;
//下滑
if (Y > 0) {
alert('下滑');
}
//上滑
else if (Y < 0) {
alert('上滑');
}
});
</pre>

jquery判断手指滑动方向的更多相关文章

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

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

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

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

  3. 移动端 uni-app 滑动事件 精确判断手指滑动方向

    移动端根据手指滑动操作判断滑动方向 设计思路: 1.根据移动端touchstart和touchend方法获取手指触摸屏幕的开始坐标和结束坐标 2.根据两个坐标计算与水平方向的夹角 3.根据夹角判断当前 ...

  4. web移动前端页面,jquery判断页面滑动方向

    /*判断上下滑动:*/ $('body').bind('touchstart',function(e){ startX = e.originalEvent.changedTouches[0].page ...

  5. js判断手指滑动方向(移动端)

    var startx, starty; //获得角度 function getAngle(angx, angy) { return Math.atan2(angy, angx) * 180 / Mat ...

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

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

  7. 用HTML和javascript(JS)计算触屏手机手指滑动方向的演示

    移动终端的流行,程序员希望通过HTML+JS完成触屏动作的识别.下面给出具体实现的例子,供大家参考. 将下面的代码复制并保存,用手机访问,现在的手机浏览器一般都支持触屏,针对本演示来讲就是支持三个js ...

  8. js判断元素滑动方向(上下左右)移动端

    每天学习一点点. 1 var startx, starty; //获得角度 function getAngle(angx, angy) { return Math.atan2(angy, angx) ...

  9. 判断listview滑动方向的代码片段

    mListView.setOnScrollListener(new OnScrollListener() { private int lastIndex = 0; @Override public v ...

随机推荐

  1. Coins POJ - 1742

    给出硬币面额及每种硬币的个数,求从1到m能凑出面额的个数. Input 多组数据,每组数据前两个数字为n,m.n表示硬币种类数,m为最大面额,之后前n个数为每种硬币的面额,后n个数为相应每种硬币的个数 ...

  2. 推荐一款超好用的工具cmder

    今天来推荐一个超级好用的命令行工具:cmder 一款Windows环境下非常简洁美观易用的cmd替代者,它支持了大部分的Linux命令.支持ssh连接linux,使用起来非常方便.比起cmd.powe ...

  3. Java中ArrayList和LinkedList的性能分析

    ArrayList和LinkedList是Java集合框架中经常使用的类.如果你只知道从基本性能比较ArrayList和LinkedList,那么请仔细阅读这篇文章. ArrayList应该在需要更多 ...

  4. .net core gRPC与IdentityServer4集成认证授权

    前言 随着.net core3.0的正式发布,gRPC服务被集成到了VS2019.本文主要演示如何对gRPC的服务进行认证授权. 分析 目前.net core使用最广的认证授权组件是基于OAuth2. ...

  5. Python_文本的读写操作

    [需求] 1. 获取文本内容,提取内容中的可用信息,对信息进行清洗等一系列处理 2. 算法输出一些内容,保存到文本文件中,便于使用 [函数] 在Python中open()函数是用来打开文件的,包括文本 ...

  6. PHP pa和ma

    <?php class Mouse { private $color; public $sex; public function __construct($role){ switch($role ...

  7. 三种常见字符编码:ASCII、Unicode和UTF-8

    什么是字符编码? 计算机只能处理数字,如果要处理文本,就必须先把文本转换为数字才能处理.最早的计算机在设计时采用8个比特(bit)作为一个字节(byte),所以,一个字节能表示的最大的整数就是255( ...

  8. 收益 or 挑战?Serverless 究竟给前端带来了什么

    作者 | 黄子毅(紫益) 阿里前端技术专家 导读:前端开发者是最早享受到 "Serverless" 好处的群体,因为浏览器就是一个开箱即用.甚至无需为计算付费的环境!Serverl ...

  9. Kafka常用操作备忘

    启动nohup ./bin/zookeeper-server-start.sh config/zookeeper.properties &nohup ./bin/kafka-server-st ...

  10. vue事件双向绑定

    事件 案例: vue的事件绑定原理:改变图片的背景颜色问题来实现这个框架的使用方法, new Vue({ el:"", data:{}, methord:{}, computed: ...