html5滑动手势
<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滑动手势的更多相关文章
- 让Bootstrap轮播插件carousel支持左右滑动手势的三种方法
因为最近开发的项目涉及到移动设备上的 HTML5 开发,其中需要实现轮播效果.然后最快捷的方式,你知道的(Bootstrap),然后原生的 Bootstrap 的 carousel.js 插件并没有支 ...
- 第八章 让Bootstrap轮播插件carousel支持左右滑动手势的三种方法
因为最近开发的项目涉及到移动设备上的 HTML5 开发,其中需要实现轮播效果.然后最快捷的方式,你知道的(Bootstrap),然后原生的 Bootstrap 的 carousel.js 插件并没有支 ...
- ios滑动手势全屏(这段代码实现了下一级控制器滑到上一级控制器)
在自定义导航控制器里面加以下代码就增加全屏滑动手势 >推向前一个控制器 // HBNavigationController.m // #import "HBNavigationCon ...
- Bootstrap幻灯轮播如何支持触屏左右滑动手势?
最近ytkah在学习用bootstrap搭建网站,Bootstrap能自适应pc端和手机端,并且移动设备优先,适合现如今移动营销.bootstrap是封装好的框架,需要某些功能只需调用相应的组件就可以 ...
- Android开发之手势滑动(滑动手势监听)详解
Android开发之手势滑动(滑动手势监听)详解 在Android应用中,经常需要手势滑动操作,比如上下滑动,或左右方向滑动,处理手势滑动通常有两种方法:一种是单独实现setOnTouchListen ...
- RE:通过移动端滑动手势实现数据加载
背景: 基于要尝试的移动端项目需要有一个通过上拉下滑手势达成加载不同数据的功能,其涉及到滑动手势和ajax数据加载方面的知识点.故对整个实现过程做一个记录整理.个人JS功底有限,看 ...
- iOS开发-UISwipeGestureRecognizer滑动手势
滑动手势也算是iOS中交互中很重要的一部分,上下左右滑动,UISwipeGestureRecognizer可以很轻松的解决这个问题,没什么难度直接看代码吧: UISwipeGestureRecogni ...
- iOS滑动手势UIPanGestureRecognizer 注意事项
今天在做侧滑页面时,发现页面随着滑动手势而滑动,到临界点时,如果再滑动会出现抖动现象.找到解决办法是进入方法后先判断一次,再判断是在滑动范围内让页面滑动.遂将滑动手势(UIPanGestureReco ...
- React-Native 之 GD (十九)TabBarItem 逻辑完善 / 关闭筛选菜单滑动手势 / Navigator 掉帧卡顿问题处理
1.TabBarItem 逻辑完善 那么为了更好的用户体验,我们这边还需要来处理一下点击 TabBarItem 的一下细节,那就是当用户点击 Item 时,可能只是单纯的想进行页面的 切换或者置顶操作 ...
随机推荐
- linux之SQL语句简明教程---ORDER BY
到目前为止,我们已学到如何藉由 SELECT 及WHERE 这两个指令将资料由表格中抓出.不过我们尚未提到这些资料要如何排列.这其实是一个很重要的问题.事实上,我们经常需要能够将抓出的资料做一个有系统 ...
- Multiply Strings 大数相乘 java
先贴上代码 public String multiply(String num1, String num2) { String str = ""; StringBuffer sb ...
- 深入理解JavaScript的闭包特性 如何给循环中的对象添加事件(转载)
原文参考:http://blog.csdn.net/gaoshanwudi/article/details/7355794 初学者经常碰到的,即获取HTML元素集合,循环给元素添加事件.在事件响应函数 ...
- E6全部刷机包
此版本号基于R533_G_11.11.10P_GSZMCAUT679DA01B_LP064DA_T679DA_S005_E001_P002_R001_G004_1FF.sbf制作耳机接听或挂机正常内置 ...
- SpringNote01.基于SpringMVC-Hibernate的Blog系统
最近,在学习Spring,做这样一个简单的blog系统,主要是让自己动手练习使用Spring,熟练的使用才干进一步的深入学习.该项目使用Maven构建,使用git进行代码管理,通过这样一个小项目,熟悉 ...
- vim 多窗口编辑
本文出自 http://blog.csdn.net/shuangde800 ------------------------------------------------------------ ...
- opengl笔记——旋转,一段代码的理解
重看:opengl笔记——OpenGL好资料备忘 在找到这段代码,对理解opengl旋转很有帮助 ... glPushMatrix(); // initialze ModelView matrix g ...
- jQuery 网格布局插件
如今,大多数网站设计要靠网格系统和布局,这能够提供给设计人员一个方便的途径来组织网页上的内容.网格的设计最常见于报纸和杂志的版面,由文字和图像构成的列组成. 这篇文章给大家分享精心挑选的15款最佳的 ...
- 05JS高级 方法没有块级作用域
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
- Find Minimum in Rotated Sorted Array,Find Minimum in Rotated Sorted ArrayII
一:Find Minimum in Rotated Sorted Array Suppose a sorted array is rotated at some pivot unknown to yo ...