//ban 为某div
let startX = 0;
ban.addEventListener("touchstart",function(){
//获取初始点击位置
startX = event.touches[0].pageX;
})
ban.addEventListener("touchmove",function(){
//获取触摸移动的长度
moveX = event.touches[0].pageX-startX;
if(moveX > 30){
//清除定时器
clearInterval(t);
//右移
r_pic();
//启动定时器
t = animation();
}
if(moveX < -30){
//清除定时器
clearInterval(t);
//左移
l_pic();
//启动定时器
t = animation();
}
})

js 触摸事件 touch的更多相关文章

  1. js 触摸事件

    js触摸事件 应用在移动端 webkit内核都支持. 触摸事件api https://dvcs.w3.org/hg/webevents/raw-file/tip/touchevents.html 事件 ...

  2. JS事件监听手机屏幕触摸事件 Touch

    JS移动客户端--触屏滑动事件 移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等事件来完成.但是在移动设备上,要实现这种轮播的效果,就需要用到核心的t ...

  3. 移动端-js触摸事件

    开发者工具 在移动开发中,一种较为容易的做法是,先在桌面上开始原型设计,然后再在打算要支持的设备上处理移动特有的部分.多点触摸正是难以在PC上进行测试的那些功能之一,因为大部分的PC都没有触摸输入. ...

  4. javascript触摸事件touch使用

    详细内容请点击 Apple在iOS 2.0中引入了触摸事件API,Android正迎头赶上这一事实标准,缩小差距.最近一个W3C工作组正合力制定这一触摸事件规范.        在本文深入研究iOS和 ...

  5. 触摸事件 Touch MotionEvent ACTION

    MotionEvent简介 当用户触摸屏幕时,将创建一个MontionEvent对象,MotionEvent包含了关于发生触摸的位置.时间信息,以及触摸事件的其他细节. 获取MontionEvent对 ...

  6. js触摸事件

    touch事件的绑定 电脑端的mouseDown,mouseUp,mouseMove分别对应移动端的touchstart,touchend,touchmove 下面的代码判断浏览器是电脑端还是移动端, ...

  7. 移动端JS 触摸事件基础

    一.手机上的触摸事件   基本事件:   touchstart   //手指刚接触屏幕时触发 touchmove    //手指在屏幕上移动时触发 touchend     //手指从屏幕上移开时触发 ...

  8. 移动端js触摸事件大全

    一.手机上的触摸事件 基本事件: touchstart   //手指刚接触屏幕时触发 touchmove    //手指在屏幕上移动时触发 touchend     //手指从屏幕上移开时触发 下面这 ...

  9. [转]starling教程-触摸事件(Touch Events)(四)

    在前面提到过,Starling是Sparrow的姊妹篇,正因为这样,Starling里的touch事件的机制其实是为移动设备的触摸交互设计的,所以当你使用它进行使用鼠标交互的桌面应用开发时,第一眼会感 ...

随机推荐

  1. CSS实现四种loading动画效果

    四种loading加载效果: <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...

  2. http://blog.csdn.net/pet8766/article/details/8186955

    http://blog.csdn.net/pet8766/article/details/8186955

  3. MyEclipse中快捷键

    ------------------------------------- MyEclipse 快捷键1(CTRL) ------------------------------------- Ctr ...

  4. 转:ios学习指南

    著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处.作者:Franz Fang链接:https://www.zhihu.com/question/20264108/answer/302 ...

  5. 使用IntelliJ IDEA创建Maven多模块项目

    转载:http://blog.csdn.net/xyw591238/article/details/52794788 使用Maven管理项目时,往往需要创建多个模块,模块之间存在相互引用的关系.对于M ...

  6. JAVA 的IO操作实例

    实例要求: 1,加法操作: 键盘输入两个数字,完成加法操作.因为从键盘接收过来的内容都是通过字符串形式存放的,所以此时直接通过包装类 Integer将字符串变为基本数据类型. 2,菜单显示: 采用的知 ...

  7. INSERT 失败,因为下列 SET 选项的设置不正确: 'ARITHABORT'

    当你在SQL Server上试图更新一个索引视图引用的表时,你可能回收到如下有错误 INSERT 失败,因为下列 SET 选项的设置不正确: 'ARITHABORT' 你必须在TSQL前Set ARI ...

  8. Mysql 5.7.24 解压版安装步骤

    1.设置 MYSQL_HOME 变量(在mysql解压根目录下) 例如:C:\Program Files\mysql-5.7.24 2.系统path 变量最后面增加 %MYSQL_HOME%\bin ...

  9. Eclipse开发C/C++之使用技巧小结,写给新手

    我需要在Linux下开发C++项目,没有VS,用Vim开发是不错,但项目大了,效率 就跟不上IDE了,所以选了Eclipse+CDT插件.当然,Vimers觉得我说的不对的请 勿喷哈,我也是水手一个. ...

  10. iOS swift版本无限滚动轮播图

    之前写过oc版本的无限滚动轮播图,现在来一个swift版本全部使用snapKit布局,数字还是pageConrrol样式可选 enum typeStyle: Int { case pageContro ...