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 时,可能只是单纯的想进行页面的 切换或者置顶操作 ...
随机推荐
- poj3624 简单的01背包问题
问题描述: 总共有N种宝石供挑选,宝石i的重量为Wi,吸引力为Di,只可以用一次.Bessie最多可负担的宝石手镯总重量为M.给出N,M,Wi,Di,求M. 非常标准的01背包问题.使用了优化的一维数 ...
- KMP算法java实现
/** * 假设现在文本串S匹配到 i 位置,模式串P匹配到 j 位置 如果j = -1,或者当前字符匹配成功(即S[i] == * P[j]),都令i++,j++,继续匹配下一个字符: 如果j != ...
- windows 2003 server 安装 .NET Framework 2.0环境
下载net2.0安装包,这里提供官方下载地址: http://www.microsoft.com/zh-cn/download/confirmation.aspx?id=1639 然后运行exe文件, ...
- UVA - 11020 Efficient Solutions(Multiset)
本题利用multiset解决.根据题意,如果我们用P(x,y)表示一个人,因为人可以相同,所以用multiset.我们会发现,如果所有人群都是有优势的,那么这些点呈现一个递减的趋势.如果刚刚插入一个人 ...
- 格而知之1:UIButton中imageView和titleLabel的位置调整
在使用UIButton时,有时候需要调整按钮内部的imageView和titleLabel的位置和尺寸.在默认情况下,按钮内部的imageView和titleLabel的显示效果是图片在左文字在右,然 ...
- ORA-03113 通信通道的文件结尾(ORA-19804 ORA-16038-归档空间满的处理方法)
1.数据库启动报错SQL> startupORACLE 例程已经启动. Total System Global Area 1887350784 bytesFixed Size 2176848 b ...
- Vijos 1120 花生采摘
和“过河”一样,在很久以前我也曾经尝试过做这道题,可无奈当时没有看清题目.题目上说要先找最大的,然后次之.当时纠结了好久,可惜没做出来.但是现在就很好做了,只需要用结构体把每一个花生植株记录下来,so ...
- AJAX+cURL+SimpleXMLElement处理数据
curl_xml.html: <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...
- HTML 语义化
语义化,让你的网页更好的被搜索引擎理解 要记住学习html标签过程中,主要注意两个方面的学习:标签的用途.标签在浏览器中的默认样式. 标签的用途:我们学习网页制作时,常常会听到一个词,语义化.那么什么 ...
- Mining 影响数据挖掘结果的 5 方面
第一个: 数据类型. 对象的不同属性会用不同的数据类型来描述,如 年龄-->int; 生日 -->date;数据挖掘时也要对不同的类型有不同的对待. 第二个: 数据质量. 数据质量直接影 ...