<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. react-native 自己搭建热更新服务器

    使用到的框架是 react-native-update react-native-update-cli 这个应该执行热更新的时候的终端命令. 通过这个,自己搭建一个热更新的服务器.

  2. Win8开发疑问与解答

    疑问:怎样获取开发者许可证 打开VS2012时,怎么在没有取得开发者许可证之前,屏蔽/跳过弹出的窗体“获取Windows8开发者许可证 你需要具有开发者许可证才能开发适用于......” 打开Blen ...

  3. XML是什么,它能够做什么?——写给XML入门者

    XML就可以扩展标记语言(eXtensible Markup Language).标记是指计算机所能理解的信息符号,通过此种标记,计算机之间能够处理包括各种信息的文章等.怎样定义这些标记,既能够选择国 ...

  4. android初级应用到高端架构教程------ 完整体系化学习android开发

    系统的学习android开发技术,从应用到底层,再到架构,告别乱糟糟的学习方式,不再是抓不住重点.从上到下贯通,全面学习android开发.让你拥有清晰的思路,一步步学习android开发! 一般而言 ...

  5. 搭建PhoneCat项目的开发与测试环境

    AngularJS官方网站提供了一个用于学习的示例项目:PhoneCat.这是一个Web应用,用户可以浏览一些Android手机,了解它们的详细信息,并进行搜索和排序操作. 获取源代码 PhoneCa ...

  6. VS2015 企业版不支持 JavaScript 语法高亮、智能提醒

    2015年7月,微软终于放出了 Visual Studio 2015 正式版,博主安装了 Visual Studio 2015 企业版之后,居然不支持 JavaScript 的语法高亮.智能提醒功能, ...

  7. (原) Jquery 判断设备是PC端,还是移动端

    判断设备是PC端,还是移动端 var ua = navigator.userAgent.toLocaleLowerCase(); var pf = navigator.platform.toLocal ...

  8. mac 桌面美化

    官网:Übersicht 先来大图:  当然,,,我自己的这个还不成型,去官网看看吧,有大神们做好的各种主题可选哦~ 像这样1: 这样2: 甚至这样3:(酷毙了有木有..)        Downlo ...

  9. 关于C#重写,隐藏的一些事

    第一次开始写技术博客,不知该从何处下手,本人算是菜鸟一枚,每每看到博客园里面的大牛们分享的技术文章,只能望其项背,高不可攀.但细细想来,若不尝试着从小处从低处慢慢去积累分享,想要成为技术大牛也只能沦为 ...

  10. 【C#】开发可以可视化操作的windows服务

    使用C#开发自定义windows服务是一件十分简单的事.那么什么时候,我们需要自己开发windows服务呢,就是当我们需要计算机定期或者一直执行我们开发的某些程序的时候.这里我以一个WCF的监听服务为 ...