<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. 【Java接口实现动态加载不同的类】

    public interface Person {       public double calcuMonthlySalary(double sal, int type);    }   publi ...

  2. Bag of Words(BOW)模型

    原文来自:http://www.yuanyong.org/blog/cv/bow-mode 重复造轮子并不是完全没有意义的. 这几天忙里偷闲看了一些关于BOW模型的知识,虽然自己做图像检索到目前为止并 ...

  3. 写一个将当前页面 URL 中的 get 参数解析成一个对象的方法。

    function getQuery () { var args = {}; var query = window.location.search.substring(1); var pairs = q ...

  4. ps怎样选取自己想要的图片部分(二)

    上篇文章我们介绍了怎样选取所要的图形.但往往我们实际做项目的时候须要创建一个圆形图标或者椭圆形图标,这样会使得我们的图标相比矩形图标更加美观一些. 那么怎样将一个矩形图标改成圆形图标呢? 首先我们须要 ...

  5. 有用的HTML+CSS片段

    HTML5页面模板 现在国外很多制作新网站直接使用了HTML5代码,当然我们也得跟上,下面是一个常用的HTML5默认模板,就像你用Dreamweaver新建一个HTML文件时的代码,只不过现在这个是H ...

  6. RAID技术

    RAID:其基本思想就是把多个相对便宜的硬盘组合起来,成为一个硬盘阵列组,使性能达到甚至超过一个价格昂贵.容量巨大的硬盘.所以称为廉价磁盘冗余数组 RAID级别: RAID 0亦称为带区集.它是将多个 ...

  7. 【矩阵乘法经典应用】【ZOJ3497】【Mistwa】

    题意:给定一个有向图(最多25个节点,每个节点的出度最多为4),给定起点和终点,然后从起点开始走,走到终点就停止,否则一直往下走,问能不能P步到达终点.也就是说从起点出发,走一条长度为P的路径,路径中 ...

  8. C#运算符的优先级

    在C#中,一共有38个常用的运用符,根据它们所执行运算的特点和它们的优先级,为了便于记忆,我将它们归为七个等级:1.单元运算符和括号.2.常规算术运算符.3.位移运算符.4.比较运算符.5.逻辑运算符 ...

  9. solr4.5分组查询、统计功能介绍

    说到分组统计估计大家都不会陌生,就是数据库的group by语句,但是当我们采用solr4.5全文检索时,数据库提供再好的sql语句都没有任何的意义了,那么在solr4.5中我们如何做到分组统计呢?其 ...

  10. Lucene打分规则与Similarity模块详解

    搜索排序结果的控制 Lucnen作为搜索引擎中,应用最为广泛和成功的开源框架,它对搜索结果的排序,有一套十分完整的机制来控制:但我们控制搜索结果排序的目的永远只有一个,那就是信息过滤,让用户快速,准确 ...