html5里可移动线性进度条的类型怎么表示,HTML5触摸事件实现移动端简易进度条的实现方法...
这篇文章主要介绍了关于HTML5触摸事件实现移动端简易进度条的实现方法,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下
前言
HTML中新添加了许多新的事件,但由于兼容性的问题,许多事件都没有广泛的应用,接下来为大家介绍一些好用的移动端触摸事件: touchstart、touchmove、touchend。
介绍
下面我们来简单介绍一下这几个事件:touchstart: 当手指触摸屏幕时候触发,即使已经有一个手指放在屏幕上也会触发。
touchmove:当手指在屏幕上滑动的时候连续地触发。在这个事件发生期间,调用preventDefault()事件可以阻止滚动。
touchend:当手指从屏幕上离开的时候触发。
这些触摸事件具有常见的dom属性。此外,他们还包含着三个用于跟踪触摸的属性:touches:表示当前跟踪的触摸操作的touch对象的数组。
targetTouches:特定于事件目标的Touch对象的数组。
changeTouches:表示自上次触摸以来发生了什么改变的Touch对象的数组。
每个touch对象包含的属性如下:clientX:触摸目标在视口中的x坐标。
clientY:触摸目标在视口中的y坐标。
pageX:触摸目标在页面中的x坐标。
pageY:触摸目标在页面中的y坐标。
screenX:screenX:触摸目标在屏幕中的x坐标。
screenY:screenX:触摸目标在屏幕中的x坐标。
identifier:标识触摸的唯一ID。
target:screenX:触摸目标在屏幕中的x坐标。
了解了触摸事件的特征,那就开始紧张刺激的实战环节吧
实战
下面我们来通过使用触摸事件来实现一个移动端可滑动的进度条
我们先进行HTML的布局
CSS部分此处省略
获取dom元素,并初始化触摸起点和按钮离容器最左方的距离
const progressWrapper = document.querySelector('.progress-wrapper')
const progress = document.querySelector('.progress')
const progressBtn = document.querySelector('.progress-btn')
const progressWrapperWidth = progressWrapper.offsetWidth
let touchPoint = 0
let btnLeft = 0
监听touchstart事件
progressBtn.addEventListener('touchstart', e => {
let touch = e.touches[0]
touchPoint = touch.clientX // 获取触摸的初始位置
btnLeft = parseInt(getComputedStyle(progressBtn, null)['left'], 10) // 此处忽略IE浏览器兼容性
})
监听touchmove事件
progressBtn.addEventListener('touchmove', e => {
e.preventDefault()
let touch = e.touches[0]
let diffX = touch.clientX - touchPoint // 通过当前位置与初始位置之差计算改变的距离
let btnLeftStyle = btnLeft + diffX // 为按钮定义新的left值
touch.target.style.left = btnLeftStyle + 'px'
progress.style.width = (btnLeftStyle / progressWrapperWidth) * 100 + '%' // 通过按钮的left值与进度条容器长度的比值,计算进度条的长度百分比
})
通过一系列的逻辑运算,我们的进度条已经基本实现了,但是发现了一个问题,当触摸位置超出进度条容器时,会产生bug,我们再来做一些限制
if (btnLeftStyle > progressWrapperWidth) {
btnLeftStyle = progressWrapperWidth
} else if (btnLeftStyle < 0) {
btnLeftStyle = 0
}
至此,一个简单的移动端滚动条就实现了
相关推荐:
html5里可移动线性进度条的类型怎么表示,HTML5触摸事件实现移动端简易进度条的实现方法...相关推荐
- html5 触摸 滚动,html5的触摸事件
1.触摸事件有哪些 touchstart,touchmove,touchend 2.分别什么时候触发 touchstart事件:当手指触摸屏幕时候触发,即使已经有一个手指放在屏幕上也会触发. touc ...
- vue aplayer 进度条无法拖动_为 Vue 的惰性加载加一个进度条
// 每日前端夜话 第412篇// 正文共:1800 字// 预计阅读时间:8 分钟 简介 通常用 Vue.js 编写单页应用(SPA)时,当加载页面时,所有必需的资源(如 JavaScript 和 ...
- cellpadding,cellspacing都是废弃的属性了,早已不推荐使用,最新的html5里已经彻底去掉了这些表现型的属性。
这两个参数都是html中table标签的参数.cellpadding 是边框与其内容的间隙大小:cellspacing 是边框与边框之间的间隙大小: cellpadding,cellspacing都是 ...
- linux进度条脚本,Linux下简易进度条的实现代码
在生活中,进度条是很常见的,那么,进度条是如何实现的呢? 首先,进度条的动态是利用人眼视觉暂留效果的.实际上是如下过程: 先输出:[= ]表示进度是1%,刷新之后 再输出:[== ].. ...
- php flash上传进度条,PHP_PHP+FLASH实现上传文件进度条相关文件 下载,PHP之所以很难实现上传进度条 - phpStudy...
PHP+FLASH实现上传文件进度条相关文件 下载 PHP之所以很难实现上传进度条是因为在我们上传文件到服务器的时候,要等到文件全部送到服务器之后,才执行相应的php文件.在这之前,文件数据保存在一个 ...
- html5的交互标签,html5里交互元素的使用方法
在H5里,交互元素就是和用户进行互动的元素,这一部分非常的重要,并且和之前的JS控制的效果不同,H5相比于HTML增加了很多的交互元素,比如隐藏显示注脚就是其中的一个交互效果. 交互元素的使用 bod ...
- android自定义进度条百分比跟着走,Android自定义View实现水平带数字百分比进度条...
这个进度条可以反映真实进度,并且完成百分比的文字时随着进度增加而移动的,所在位置也恰好是真实完成的百分比位置,效果如下: 思路如下:第一部分是左侧的蓝色直线,代表已经完成的进度:第二部分是右侧灰色的直 ...
- android进度条随时间走,每天一点Android干货-时间与日期、进度条
timePicker.setIs24HourView(true); //设置是否以24小时制显示 timePicker.getCurrentHour();//获取当前时钟数 timePicker.ge ...
- html5表单属性自动获得焦点,HTML5里autofocus属性
转载:http://www.webhek.com/html5-autofocus/ HTML5给我们带来了一大堆神奇的东西.以前需要用JavaScript和Flash完成的任务,例如表单校验,INPU ...
最新文章
- oracle ocr组成员替换,Oracle RAC 迁移替换 OCR 盘
- P1801 黑匣子_NOI导刊2010提高(06)
- CLR via C# 读书笔记 1-2 创建线程的成本
- php pcntl扩展下载,linux下如何安装PHP pcntl 扩展
- python五种调试或排错的方法
- 如何让整个表格高度固定_财务预算太费精力?多亏了这73张财务预算表格模板,让你算量快又准!直接用...
- elasticsearch5.4.3、kibana分布式安装
- Java黑皮书课后题第3章:**3.27(几何:点是否在三角形内)假设一个平面上有一个直角三角形。编写程序,提示用户输入一个点的x坐标和y坐标,然后判断这个点是否在该三角形内
- 关闭sublime更新提示完整方案(转)并且统一TAB为四个空格、禁止升级检查
- PHP编写shell
- Studio 3T:MongoDB SQL探究
- GCC 原子操作中 Acquire/Release/Consume/Relaxed 内存模型
- JSP编程,url中加斜杠和不加斜杠的区别
- 计算机中单位换算tb,bit Byte KB MB GB TB 单位换算
- QUIC会成为互联网传输的颠覆者吗?
- [工作日志] LDAP的SHA加密方式--Java
- 07 Anykey图像优化及文字头像生成与加载
- 360进攻搜狗后院!研发输入法 搜狗称无压力
- Codeforces A. XXXXX (数学 / 双指针) (Round #649 Div.2)
- 大众点评列表页采集思路,破解字体文件反爬(包含项目github 可用时间至2020-01-21)