這篇文章主要介紹移動端如何使用HTML實現簡單進度條,文中介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們一定要看完!
創新互聯成立與2013年,是專業互聯網技術服務公司,擁有項目做網站、網站制作網站策劃,項目實施與項目整合能力。我們以讓每一個夢想脫穎而出為使命,1280元高青做網站,已為上家服務,為高青各地企業和個人服務,聯系電話:13518219792HTML中新添加了許多新的事件,但由于兼容性的問題,許多事件都沒有廣泛的應用,接下來為大家介紹一些好用的移動端觸摸事件: 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的布局
<p class="progress-wrapper"> <p class="progress"></p> <p class="progress-btn"></p> </p>
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 }
至此,一個簡單的移動端滾動條就實現了
以上是移動端如何使用HTML實現簡單進度條的所有內容,感謝各位的閱讀!希望分享的內容對大家有幫助,更多相關知識,歡迎關注創新互聯網站制作公司行業資訊頻道!
網站標題:移動端如何使用HTML實現簡單進度條-創新互聯
當前地址:http://m.newbst.com/article18/hsggp.html
成都網站建設公司_創新互聯,為您提供服務器托管、企業網站制作、微信公眾號、企業建站、虛擬主機、品牌網站建設
聲明:本網站發布的內容(圖片、視頻和文字)以用戶投稿、用戶轉載內容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網站立場,如需處理請聯系客服。電話:028-86922220;郵箱:631063699@qq.com。內容未經允許不得轉載,或轉載時需注明來源: 創新互聯