<div id="divMove" style="height: 100px;"></div>
<div id="slideDiv" style="width: 300px; height:30px;background-color:#AA967D;">
左滑
<button id="btnDelete" style="display: none;">删除</button>
</div>
<script type="text/javascript">
var touchGlobal;
document.getElementById("slideDiv").addEventListener("touchstart",function(e){
touchGlobal=e.touches[0]; },false);
document.getElementById("slideDiv").addEventListener("touchmove",function(e){
var touch=e.touches[0];
var x=Number(touch.pageX);
document.getElementById("divMove").innerHTML=x;
if(touchGlobal.pageX-x>0){
document.getElementById("btnDelete").setAttribute("style","display: inline");
}
else{
document.getElementById("btnDelete").setAttribute("style","display: none");
}
},false);
document.getElementById("slideDiv").addEventListener("touchend",function(e){
},false);
</script>

html5滑动手势的更多相关文章

  1. 让Bootstrap轮播插件carousel支持左右滑动手势的三种方法

    因为最近开发的项目涉及到移动设备上的 HTML5 开发,其中需要实现轮播效果.然后最快捷的方式,你知道的(Bootstrap),然后原生的 Bootstrap 的 carousel.js 插件并没有支 ...

  2. 第八章 让Bootstrap轮播插件carousel支持左右滑动手势的三种方法

    因为最近开发的项目涉及到移动设备上的 HTML5 开发,其中需要实现轮播效果.然后最快捷的方式,你知道的(Bootstrap),然后原生的 Bootstrap 的 carousel.js 插件并没有支 ...

  3. ios滑动手势全屏(这段代码实现了下一级控制器滑到上一级控制器)

    在自定义导航控制器里面加以下代码就增加全屏滑动手势 >推向前一个控制器 //  HBNavigationController.m // #import "HBNavigationCon ...

  4. Bootstrap幻灯轮播如何支持触屏左右滑动手势?

    最近ytkah在学习用bootstrap搭建网站,Bootstrap能自适应pc端和手机端,并且移动设备优先,适合现如今移动营销.bootstrap是封装好的框架,需要某些功能只需调用相应的组件就可以 ...

  5. Android开发之手势滑动(滑动手势监听)详解

    Android开发之手势滑动(滑动手势监听)详解 在Android应用中,经常需要手势滑动操作,比如上下滑动,或左右方向滑动,处理手势滑动通常有两种方法:一种是单独实现setOnTouchListen ...

  6. RE:通过移动端滑动手势实现数据加载

      背景:         基于要尝试的移动端项目需要有一个通过上拉下滑手势达成加载不同数据的功能,其涉及到滑动手势和ajax数据加载方面的知识点.故对整个实现过程做一个记录整理.个人JS功底有限,看 ...

  7. iOS开发-UISwipeGestureRecognizer滑动手势

    滑动手势也算是iOS中交互中很重要的一部分,上下左右滑动,UISwipeGestureRecognizer可以很轻松的解决这个问题,没什么难度直接看代码吧: UISwipeGestureRecogni ...

  8. iOS滑动手势UIPanGestureRecognizer 注意事项

    今天在做侧滑页面时,发现页面随着滑动手势而滑动,到临界点时,如果再滑动会出现抖动现象.找到解决办法是进入方法后先判断一次,再判断是在滑动范围内让页面滑动.遂将滑动手势(UIPanGestureReco ...

  9. React-Native 之 GD (十九)TabBarItem 逻辑完善 / 关闭筛选菜单滑动手势 / Navigator 掉帧卡顿问题处理

    1.TabBarItem 逻辑完善 那么为了更好的用户体验,我们这边还需要来处理一下点击 TabBarItem 的一下细节,那就是当用户点击 Item 时,可能只是单纯的想进行页面的 切换或者置顶操作 ...

随机推荐

  1. LSH算法原理

    原始链接--http://www.jiahenglu.net/NSFC/LSH.html LSH(Location Sensitive Hash),即位置敏感哈希函数.与一般哈希函数不同的是位置敏感性 ...

  2. Win8 App使用Listview的简单方法

    这是Win8 App神圣不可侵犯的头文件: <head> <meta charset="utf-8"> <title>ListViewExamp ...

  3. Result Cache结果高速缓存 (转)

    1.1 概述 SQL 查询结果高速缓存可在数据库内存中对查询结果集和查询碎片启用显式高速缓存.存储在共享池(Share Pool)中的专用内存缓冲区可用于存储和检索高速缓存的结果.对查询访问的数据库对 ...

  4. CSS3 背景属性

    CSS3 background-size 属性 div {background:url(bg_flower.gif);-moz-background-size:63px 100px; /* 老版本的 ...

  5. 转载 hashmap java8前的原理实现

    http://zhangshixi.iteye.com/blog/672697 1.    HashMap概述: HashMap是基于哈希表的Map接口的非同步实现.此实现提供所有可选的映射操作,并允 ...

  6. 读取hdfs文件内容

    基础环境: cdh2.71 需要注意: url地址参照 <property> <name>dfs.namenode.servicerpc-address</name> ...

  7. 如何将java web项目上线/部署到公网

    关于如何将java web上线,部署到公网,让全世界的人都可以访问的问题. 1.在myeclipse中开发好项目,打包成war格式,不会的同学参考以下 http://zhidao.baidu.com/ ...

  8. Magnolia-CMS安装配置

    Magnolia-CMS安装配置 Magnolia-CMS安装配置 介绍:Magnolia 是一个开源基于Java的Web内容管理系统(CMS),构建在Java内容知识库标准(JSR-170).它适合 ...

  9. 对简单的正则表达式的理解V1.0

    [^<]* 我得理解也是基本来自官方的解释 [] 我理解是它其中的内容,是指内容哦, 内容是可以选择的 字符 集合 ,比如说  @"<div style="color: ...

  10. 4x4矩阵键盘扫描

    4x4矩阵键盘扫描 Windows 10 IoT Core 是微软针对物联网市场的一个重要产品,与以往的Windows版本不同,是为物联网设备专门设计的,硬件也不仅仅限于x86架构,同时可以在ARM架 ...