介绍
使用HTML5怎么实现移动端简易进度条?很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。
<李> touchstart:当手指触摸屏幕时候触发,即使已经有一个手指放在屏幕上也会触发。
<李> touchmove:当手指在屏幕上滑动的时候连续地触发。在这个事件发生期间,调用preventDefault()事件可以阻止滚动。
<李> touchend:当手指从屏幕上离开的时候触发。
这些触摸事件具有常见的dom属性。此外,他们还包含着三个用于跟踪触摸的属性:
<李> 触动:表示当前跟踪的触摸操作的接触对象的数组。
<李> targetTouches:特定于事件目标的接触对象的数组。
<李> changeTouches:表示自上次触摸以来发生了什么改变的接触对象的数组。
每个触摸对象包含的属性如下:
<李> clientX:触摸目标在视口中的x坐标。
<李> clientY:触摸目标在视口中的y坐标。
<李> pageX:触摸目标在页面中的x坐标。
<李> pageY:触摸目标在页面中的y坐标。
<李> screenX: screenX:触摸目标在屏幕中的x坐标。
<李> screenY: screenX:触摸目标在屏幕中的x坐标。
<李> 标识符:标识触摸的唯一ID。
<李> 目标:screenX:触摸目标在屏幕中的x坐标。
了解了触摸事件的特征,那就开始紧张刺激的实战环节吧
<强>实战
下面我们来通过使用触摸事件来实现一个移动端可滑动的进度条
我们先进行HTML的布局
& lt; div 类=皃rogress-wrapper"比;
,,,& lt; div 类=皃rogress"祝辞& lt;/div>
,,,& lt; div 类=皃rogress-btn"祝辞& lt;/div>
& lt;/div> CSS部分此处省略
获取dom元素,并初始化触摸起点和按钮离容器最左方的距离
const progressWrapper =, document.querySelector (& # 39; .progress-wrapper& # 39;)
const progress =, document.querySelector(& # 39;编# 39;)
const progressBtn =, document.querySelector (& # 39; .progress-btn& # 39;)
const progressWrapperWidth =progressWrapper.offsetWidth
let touchPoint =0
let btnLeft =, 0 监听touchstart事件
progressBtn.addEventListener (& # 39; touchstart& # 39;,, e =祝辞,{
,,,let touch =, e.touches [0]
,,,touchPoint =, touch.clientX //,获取触摸的初始位置=,btnLeft 方法(getComputedStyle (progressBtn, null)[& # 39;左# 39;],,10),//,此处忽略IE浏览器兼容性
}) 监听touchmove事件
progressBtn.addEventListener (& # 39; touchmove& # 39;,, e =祝辞,{
e.preventDefault ()
,,,let touch =, e.touches [0]
,,,let diffX =, touch.clientX 作用;touchPoint //,通过当前位置与初始位置之差计算改变的距离
,,,let btnLeftStyle =, btnLeft +, diffX //,为按钮定义新的左值
,,,touch.target.style.left =, btnLeftStyle +, & # 39; px # 39;
,,,progress.style.width =,(时间/btnLeftStyle progressWrapperWidth), *, 100, +, & # 39; % & # 39;,//,通过按钮的左值与进度条容器长度的比值,计算进度条的长度百分比
}) 通过一系列的逻辑运算,我们的进度条已经基本实现了,但是发现了一个问题,当触摸位置超出进度条容器时,会产生虫,我们再来做一些限制
if (btnLeftStyle 祝辞,progressWrapperWidth), {
,,,btnLeftStyle =progressWrapperWidth
,,,},else if (btnLeftStyle & lt;, 0), {
,,,btnLeftStyle =0
} 看完上述内容是否对您有帮助呢?如果还想对相关知识有进一步的了解或阅读更多相关文章,请关注行业资讯频道,感谢您对的支持。
