1.   <div id="divMove" style="height: 100px;"></div>
  2. <div id="slideDiv" style="width: 300px; height:30px;background-color:#AA967D;">
  3. 左滑
  4. <button id="btnDelete" style="display: none;">删除</button>
  5. </div>
  1. <script type="text/javascript">
  2. var touchGlobal;
  3. document.getElementById("slideDiv").addEventListener("touchstart",function(e){
  4. touchGlobal=e.touches[0];
  5.  
  6. },false);
  7. document.getElementById("slideDiv").addEventListener("touchmove",function(e){
  8. var touch=e.touches[0];
  9. var x=Number(touch.pageX);
  10. document.getElementById("divMove").innerHTML=x;
  11. if(touchGlobal.pageX-x>0){
  12. document.getElementById("btnDelete").setAttribute("style","display: inline");
  13. }
  14. else{
  15. document.getElementById("btnDelete").setAttribute("style","display: none");
  16. }
  17. },false);
  18. document.getElementById("slideDiv").addEventListener("touchend",function(e){
  19. },false);
  20. </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. 把DEDE的在线文本编辑器换成Kindeditor不显示问题

    在织梦论坛下载了[Kindeditor编辑器For DedeCMS],按照操作说明安装后,后台文章编辑的区域却显示空白,有人说不兼容V57版本,有人说不兼容gbk版本,我也纠结了很久,在网上找了很多版 ...

  2. Error:/bin/bash: /bin/java: No such file or directory

    描述:在Hadoop运行Job的时候,可能会报这样的一个错误“/bin/bash: /bin/java: No such file or directory”,那是因可能有些地方用到了/bin/jav ...

  3. 关于VMware导入Linux VM找不到网卡的问题

    今天遇到一个问题:由于虚拟机升级,导致以前的Linux VM(CentoS 6.7)在新的VMware里面打开,系统提示找不到网卡的问题,在网上找了好多解决办法,基本上都是一样的答案. 与网卡有关的几 ...

  4. cf公式专场-续

    Benches Time Limit:500MS     Memory Limit:65536KB     64bit IO Format:%I64d & %I64u Submit Statu ...

  5. Bellman 算法

    这道题目事实上就是在求有没有正环.与求负环的差别就是要不断的更新值,可是这个值要变大.而不是变小. Currency Exchange Time Limit: 1000MS   Memory Limi ...

  6. LeetCode Day5——House Robber

    问题描述: 意思就是说:给定一个数组,寻找一种选取方法,使得在保证任何两个相邻元素不同时被选的条件下得到的数值总和最大. 1. 递归 设nums为数组首地址,numsSize为数组的大小,max[i] ...

  7. 绿色mysql启动脚本

    启动脚本如下:./mysqld_safe --defaults-file=/export/servers/mysql-5.5.38/my.cnf --ledir=/export/servers/mys ...

  8. javascript设计模式——Publish/Subscribe

    推荐阅读http://dev.housetrip.com/2014/09/15/decoupling-javascript-apps-using-pub-sub-pattern/ 我们先引出问题的所在 ...

  9. Asp.Net长文件名下载的问题和解决办法

    在Asp.Net中写了一个附件上传和下载的程序,附件上传到数据库中,然后将附件的GUID保存起来,我们可以根据GUID来找到数据库中的附件,一般附件下载的代码是: <!--<br /> ...

  10. Android 上多方式定位元素(python)

    Android 上多方式定位元素(python) 在学习实际UI自动化测试的时候,首先就需要定位元素,然而定位元素也是最头疼的地方,因为元素各种控件名称的缺失会影响元素的准确定位.下面针对Androi ...