<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. kvm-GT

    REF: http://los-vmm.sc.intel.com/wiki/How-to-setup-kvmgthttp://xenvgt.sh.intel.com/image/bdw-h/ Host ...

  2. Sumsets(3sum问题,枚举d,c二分a+b)

    Sumsets Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 9997   Accepted: 2736 Descripti ...

  3. SQLServer中临时表与表变量的区别分析【转】

    在实际使用的时候,我们如何灵活的在存储过程中运用它们,虽然它们实现的功能基本上是一样的,可如何在一个存储过程中有时候去使用临时表而不使用表变量,有时候去使用表变量而不使用临时表呢? 临时表 临时表与永 ...

  4. ios 第三方qq授权登陆,第一次登陆后,再次登陆,失效

    这问题找了非常久.最后跟客服联系到.等授权成功后要对 _tencentOAuth 对象释放

  5. lua的学习

    lua是什么 Lua是一中嵌入式的脚本语言. Lua语言可以独立进行编程,但这不是其主要的使用方式.Lua虽然有动态.灵活的语法提供强大的功能,但并不像 Java.Python 等一样有一个完善的库( ...

  6. iOS音频播放(二):AudioSession

    (本文转自码农人生) 前言 在实施前一篇中所述的7个步骤步之前还必须面对一个麻烦的问题,AudioSession.   AudioSession简介 AudioSession这个玩意的主要功能包括以下 ...

  7. 使用float属性布局时父元素高度不能自适应的解决方法

    在网页的布局过程中,经常会用到float属性来实现页面的左右布局,但是有个问题就是父元素的高度并不能根据子元素的高度自适应.比如下面这段代码: <!DOCTYPE html> <ht ...

  8. Winform子窗体刷新父窗体

    调用窗体(父):Form1,被调用窗体(子):Form2方法1:   所有权法//Form1://需要有一个公共的刷新方法public   void   Refresh_Method(){//...} ...

  9. 用GoEasy推送实现Java实时推送

    前段时间客户有个需求他希望他在后台管理页面发布一个消息,所有用这个系统的用户无论在哪个页面都能及时收到他发布的信息,以前对于类似需求在少量 页面接收的前提下,我一般采用ajax定时去服务器pull信息 ...

  10. DOM常见属性及用法

    1:innerHTML.outerHTML.innerText.outerText innerHTML: 设置或获取位于对象起始和结束标签内的HTML. outerHTML: 设置或获取对象及其内容的 ...