使用HTML5怎么實現(xiàn)移動端簡易進度條

使用HTML5怎么實現(xiàn)移動端簡易進度條？很多新手對此不是很清楚，為了幫助大家解決這個難題，下面小編將為大家詳細講解，有這方面需求的人可以來學習下，希望你能有所收獲。

創(chuàng)新互聯(lián)長期為成百上千客戶提供的網站建設服務，團隊從業(yè)經驗10年，關注不同地域、不同群體，并針對不同對象提供差異化的產品和服務；打造開放共贏平臺，與合作伙伴共同營造健康的互聯(lián)網生態(tài)環(huán)境。為阿壩州企業(yè)提供專業(yè)的成都做網站、成都網站建設，阿壩州網站改版等技術服務。擁有十年豐富建站經驗和眾多成功案例,為您定制開發(fā)。

  1. touchstart： 當手指觸摸屏幕時候觸發(fā)，即使已經有一個手指放在屏幕上也會觸發(fā)。

  2. touchmove：當手指在屏幕上滑動的時候連續(xù)地觸發(fā)。在這個事件發(fā)生期間，調用preventDefault()事件可以阻止?jié)L動。

  3. touchend：當手指從屏幕上離開的時候觸發(fā)。

這些觸摸事件具有常見的dom屬性。此外，他們還包含著三個用于跟蹤觸摸的屬性：

  1. touches：表示當前跟蹤的觸摸操作的touch對象的數(shù)組。

  2. targetTouches：特定于事件目標的Touch對象的數(shù)組。

  3. changeTouches：表示自上次觸摸以來發(fā)生了什么改變的Touch對象的數(shù)組。

每個touch對象包含的屬性如下：

  1. clientX：觸摸目標在視口中的x坐標。

  2. clientY：觸摸目標在視口中的y坐標。

  3. pageX：觸摸目標在頁面中的x坐標。

  4. pageY：觸摸目標在頁面中的y坐標。

  5. screenX：screenX：觸摸目標在屏幕中的x坐標。

  6. screenY：screenX：觸摸目標在屏幕中的x坐標。

  7. identifier：標識觸摸的唯一ID。

  8. target：screenX：觸摸目標在屏幕中的x坐標。

了解了觸摸事件的特征，那就開始緊張刺激的實戰(zhàn)環(huán)節(jié)吧

實戰(zhàn)

下面我們來通過使用觸摸事件來實現(xiàn)一個移動端可滑動的進度條

我們先進行HTML的布局

<div class="progress-wrapper">
    <div class="progress"></div>
    <div class="progress-btn"></div>
</div>

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

監(jiān)聽touchstart事件

progressBtn.addEventListener('touchstart', e => {
    let touch = e.touches[0]
    touchPoint = touch.clientX // 獲取觸摸的初始位置
 btnLeft = parseInt(getComputedStyle(progressBtn, null)['left'], 10) // 此處忽略IE瀏覽器兼容性
})

監(jiān)聽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值與進度條容器長度的比值，計算進度條的長度百分比
})

通過一系列的邏輯運算，我們的進度條已經基本實現(xiàn)了，但是發(fā)現(xiàn)了一個問題，當觸摸位置超出進度條容器時，會產生bug，我們再來做一些限制

if (btnLeftStyle > progressWrapperWidth) {
    btnLeftStyle = progressWrapperWidth
    } else if (btnLeftStyle < 0) {
    btnLeftStyle = 0
}

看完上述內容是否對您有幫助呢？如果還想對相關知識有進一步的了解或閱讀更多相關文章，請關注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝您對創(chuàng)新互聯(lián)的支持。

本文名稱：使用HTML5怎么實現(xiàn)移動端簡易進度條
當前路徑：http://www.muchs.cn/article20/gdgoco.html

成都網站建設公司_創(chuàng)新互聯(lián)，為您提供標簽優(yōu)化、全網營銷推廣、網站建設、定制網站、做網站、域名注冊

廣告

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)

商城網站建設