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. Java字符串课后作业

    [实验任务] 1.实验题目:字串加密 2.实验内容:古罗马皇帝凯撒在打仗时曾经使用过以下方法加密军事情报:

  2. 网络编程java

    网络编程 1.网络编程概述(1).C/S结构:指客户端与服务端结构,常见程序QQ;(2).B/S结构:指浏览器和服务器的结构;2.网络编程的三要素:*IP地址*端口号*通信协议(UDP/TCP) *I ...

  3. MYSQL事件隔离级别以及复读,幻读,脏读的理解

    一.mysql事件隔离级别 1未提交读(READUNCOMMITTED) 另一个事务修改了数据,但尚未提交,而本事务中的SELECT会读到这些未被提交的数据(脏读)( 隔离级别最低,并发性能高 ) 2 ...

  4. Struts2:搭建原理

    记录下,struts2的搭建过程: 1核心jar包: struts-2.1.8\apps\struts2-blank-2.1.8.war 解压后 在struts2-blank-2.1.8\WEB-IN ...

  5. 第六版PMBOK中工具与技术的介绍:数据收集数据分析数据表现

    数据收集技术: 1.头脑风暴:收集关于项目方法的创意和解决方案.2.焦点小组:召集预定的相关方和主题专家,了解他们对所讨论的产品服务或成果的期望和态度.主持人引导大家互动式讨论.3.访谈:通过与相关方 ...

  6. 高通电源管理函数的power_supply的调用关系

    以msm8909为例,高通的主要文件有几个: qpnp-linear-charger.c(线性充电器) qpnp-vm-bms.c(BMS管理) power_supply_core.c(power_s ...

  7. 算法---区间K大数查找 Java 蓝桥杯ALGO-1

    import java.util.Arrays; import java.util.Scanner; public class Main { public static void main(Strin ...

  8. linux自启动脚本.sh

    while [ 1 ]; do              PRO_NUM=`ps -ef | grep "cms$" | grep -v "grep" | wc ...

  9. google::Glog

    windows下使用google的Glog库 下载glog-.tar.gz,解压. vs2013打开工程, 有四个项目 libglog libglog_static logging_unittest ...

  10. php有orm吗

    ORM是通过使用描述对象和数据库之间映射的元数据,将程序中的对象自动持久化到关系数据库中.本质上就是将数据从一种形式转换到另外一种形式. ORM提供了所有SQL语句的生成,代码人员远离了数据库概念.从 ...