html5手机触屏效果,html5手机触屏touch事件的详细介绍
HTML5中新添加了很多事件,但是由于他们的兼容问题不是很理想,应用实战性不是太强,所以在这里基本省略,咱们只分享应用广泛兼容不错的事件,日后随着兼容情况提升以后再陆续添加分享。
今天为大家介绍的事件主要是触摸事件:
touchstart:触摸开始的时候触发
touchmove:手指在屏幕上滑动的时候触发
touchend:触摸结束的时候触发
而每个触摸事件都包括了三个触摸列表,每个列表里包含了对应的一系列触摸点(用来实现多点触控):
touches:当前位于屏幕上的所有手指的列表。
targetTouches:位于当前DOM元素上手指的列表。
changedTouches:涉及当前事件手指的列表。
每个触摸点由包含了如下触摸信息(常用):
identifier:一个数值,唯一标识触摸会话(touch session)中的当前手指。一般为从0开始的流水号(android4.1,uc)
target:DOM元素,是动作所针对的目标。
pageX/pageX/clientX/clientY/screenX/screenY:一个数值,动作在屏幕上发生的位置(page包含滚动距离,client不包含滚动距离,screen则以屏幕为基准)。
radiusX/radiusY/rotationAngle:画出大约相当于手指形状的椭圆形,分别为椭圆形的两个半径和旋转角度。初步测试浏览器不支持,好在功能不常用,欢迎大家反馈。
代码如下:var obj = document.getElementByIdx_x('id');
obj.addEventListener('touchmove', function(event) {
// 如果这个元素的位置内只有一个手指的话
if (event.targetTouches.length == 1) {
event.preventDefault();// 阻止浏览器默认事件,重要
var touch = event.targetTouches[0];
// 把元素放在手指所在的位置
obj.style.left = touch.pageX-50 + 'px';
obj.style.top = touch.pageY-50 + 'px';
}
}, false);
html5手机触屏效果,html5手机触屏touch事件的详细介绍相关推荐
- php 控件 手机触控,html5手机触屏touch事件的详细介绍
HTML5中新添加了很多事件,但是由于他们的兼容问题不是很理想,应用实战性不是太强,所以在这里基本省略,咱们只分享应用广泛兼容不错的事件,日后随着兼容情况提升以后再陆续添加分享. 今天为大家介绍的事件 ...
- 手机 html 折叠效果,HTML5仿苹果手机的面板合拢折叠效果
passbook仿苹果手机的面板合拢折叠效果-html5特效 .pocket{ width:300px; height:460px; padding: 10px; overflow: hidden; ...
- html 滑屏 效果,HTML5 web app实现手动页面滑屏效果
现在很流行在H5页面滑屏的效果,特别是在微信浏览器窗口中,几乎很多推广的活动是使用到上下滑屏,一开始和前端的同事一起合作写滑屏效果花费了很多的时间,而且写出来的页面在浏览器的兼容上踩了很多坑,于是果断 ...
- html5的canvas动画效果,HTML5 Canvas:制作动画特效
要在HTML5 canvas中绘制图像动画效果,你需要绘制出每一帧的图像,然后在一个极短的时间内从一帧过渡到下一帧,形成动画效果.这其实是一种视觉欺骗,原理就像播放电影一样,胶片上每一格是一帧图片,然 ...
- html5流式布局,流式布局是什么?流式布局详细介绍
在PC端进行网页制作时,经常使用固定像素并且内容居中的网页布局,为了适应小屏幕的设备,在移动设备和跨平台(响应式)网页开发过程中,多数使用流式布局,下面我们就对流式布局进行详细介绍. 流式布局是一种等 ...
- html5怎么产生手风琴效果,Html5 js如何实现手风琴效果
Html5 js如何实现手风琴效果 发布时间:2020-08-03 09:54:10 来源:亿速云 阅读:92 作者:小猪 这篇文章主要为大家展示了Html5 js如何实现手风琴效果,内容简而易懂,希 ...
- html5怎么实现雨滴效果,HTML5实现晶莹剔透的雨滴特效
HTML5雨滴特效 img { display: none; } body { overflow: hidden; } #canvas { position: absolute; top: 0px; ...
- HTML5段落标签的效果,HTML5标签:section元素的使用方法及作用
html元素中section标签是html5中新增的标签,主要用于定义文档页面中"节"或"段"的区块,下面,我们就详细了解一下 标签的使用方法及作用. 标签定义 ...
- html5图片文字环绕效果,HTML5实现Word中文字全环绕图片效果
实现这个功能是当时看见数字报的展示出来的编排方式,就是图片+热点,而且下载打开还是PDF的,让我这个WP用户咋个看.想实现Word中的编排方式,也需要浏览器支持Word插件,火狐.谷歌.Opera这些 ...
最新文章
- centos mysql拒绝连接失败_CentOS下mysql远程连接的失败的解决方法
- 个性二维码开源专题液化/圆角/效果
- Servlet的默认设置
- angular 应为声明或语句_“允许”员工自愿降薪后,多益网络再发声:声明降薪非自愿者奖 3 万...
- 可以发外链的网站_SEO分享:网站推广的四大推广方法
- [NOIP1999] 提高组 洛谷P1014 Cantor表
- 原生js实现jquery库中选择器的功能(jquery库封装一)
- 电脑win7语音怎么测试软件,win7话筒怎么测试 win7话筒测试方法【图文】
- [转载] 详细介绍Python函数中的默认参数
- CMake交叉编译配置
- 热点|国家动物健康与食品安全创新联盟成立科技创新赋能委员会 并首发动物源食品信任追溯平台...
- 基于单片机的自行车里程监测系统的设计(自行车码表)
- Material Design-Surface平面第二篇
- 大数据分析引擎-Doris简要介绍
- ur3手眼标定+realsenseL515
- MLAT-Autoencoders---下篇-关键代码及结果展示(2)
- 反思篇 自我提升第四天
- 麒麟桌面系统安全中心介绍
- 基于tair的分布式锁实现原理
- 项目开发中的一些注意事项以及技巧总结
热门文章
- 模拟滑动android无障碍,Android无障碍简单开发-模拟滑动点击输入等
- 【HarmonyOS HiSpark AI Camera试用连载 】AI_Camera_Hi3516DV300开发套件非专业开箱
- 13计算机组装,舞阳中专2012-13年度《计算机组装与维修》期中考试试题
- VMware ESXi 8.0U1 集成网卡驱动和 NVMe 驱动 (网卡驱动集成版,整合版)
- java opencv磨皮算法_美肤磨皮算法OpenCV3实现
- AMD GPU驱动,ROCM,Pytorch安装教程(A卡6700xt)
- Python_封装案例(小明爱跑步)
- GIMP类似于PhotoShop的开源免费软件
- 黄金圈法则:成功者必备的深度思考方法
- python爬取携程网旅游_爬取携程网(ajax动态加载)