真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

成都創(chuàng)新互聯(lián)網(wǎng)站制作重慶分公司

使用HTML5怎么實(shí)現(xiàn)移動(dòng)端簡(jiǎn)易進(jìn)度條-創(chuàng)新互聯(lián)

使用HTML5怎么實(shí)現(xiàn)移動(dòng)端簡(jiǎn)易進(jìn)度條？很多新手對(duì)此不是很清楚，為了幫助大家解決這個(gè)難題，下面小編將為大家詳細(xì)講解，有這方面需求的人可以來(lái)學(xué)習(xí)下，希望你能有所收獲。

創(chuàng)新互聯(lián)建站是一家網(wǎng)站設(shè)計(jì)公司，集創(chuàng)意、互聯(lián)網(wǎng)應(yīng)用、軟件技術(shù)為一體的創(chuàng)意網(wǎng)站建設(shè)服務(wù)商，主營(yíng)產(chǎn)品：自適應(yīng)網(wǎng)站建設(shè)、成都品牌網(wǎng)站建設(shè)、全網(wǎng)整合營(yíng)銷推廣。我們專注企業(yè)品牌在網(wǎng)站中的整體樹(shù)立，網(wǎng)絡(luò)互動(dòng)的體驗(yàn)，以及在手機(jī)等移動(dòng)端的優(yōu)質(zhì)呈現(xiàn)。成都網(wǎng)站建設(shè)、成都網(wǎng)站設(shè)計(jì)、移動(dòng)互聯(lián)產(chǎn)品、網(wǎng)絡(luò)運(yùn)營(yíng)、VI設(shè)計(jì)、云產(chǎn)品.運(yùn)維為核心業(yè)務(wù)。為用戶提供一站式解決方案，我們深知市場(chǎng)的競(jìng)爭(zhēng)激烈，認(rèn)真對(duì)待每位客戶，為客戶提供賞析悅目的作品，網(wǎng)站的價(jià)值服務(wù)。

  1. touchstart： 當(dāng)手指觸摸屏幕時(shí)候觸發(fā)，即使已經(jīng)有一個(gè)手指放在屏幕上也會(huì)觸發(fā)。

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

  3. touchend：當(dāng)手指從屏幕上離開(kāi)的時(shí)候觸發(fā)。

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

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

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

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

每個(gè)touch對(duì)象包含的屬性如下：

  1. clientX：觸摸目標(biāo)在視口中的x坐標(biāo)。

  2. clientY：觸摸目標(biāo)在視口中的y坐標(biāo)。

  3. pageX：觸摸目標(biāo)在頁(yè)面中的x坐標(biāo)。

  4. pageY：觸摸目標(biāo)在頁(yè)面中的y坐標(biāo)。

  5. screenX：screenX：觸摸目標(biāo)在屏幕中的x坐標(biāo)。

  6. screenY：screenX：觸摸目標(biāo)在屏幕中的x坐標(biāo)。

  7. identifier：標(biāo)識(shí)觸摸的ID。

  8. target：screenX：觸摸目標(biāo)在屏幕中的x坐標(biāo)。

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

實(shí)戰(zhàn)

下面我們來(lái)通過(guò)使用觸摸事件來(lái)實(shí)現(xiàn)一個(gè)移動(dòng)端可滑動(dòng)的進(jìn)度條

我們先進(jìn)行HTML的布局


    
    

CSS部分此處省略

獲取dom元素，并初始化觸摸起點(diǎn)和按鈕離容器最左方的距離

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)聽(tīng)touchstart事件

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

監(jiān)聽(tīng)touchmove事件

progressBtn.addEventListener('touchmove', e => {
e.preventDefault()
    let touch = e.touches[0]

    let diffX = touch.clientX - touchPoint // 通過(guò)當(dāng)前位置與初始位置之差計(jì)算改變的距離
    let btnLeftStyle = btnLeft + diffX // 為按鈕定義新的left值

    touch.target.style.left = btnLeftStyle + 'px'

    progress.style.width = (btnLeftStyle / progressWrapperWidth) * 100 + '%' // 通過(guò)按鈕的left值與進(jìn)度條容器長(zhǎng)度的比值，計(jì)算進(jìn)度條的長(zhǎng)度百分比
})

通過(guò)一系列的邏輯運(yùn)算，我們的進(jìn)度條已經(jīng)基本實(shí)現(xiàn)了，但是發(fā)現(xiàn)了一個(gè)問(wèn)題，當(dāng)觸摸位置超出進(jìn)度條容器時(shí)，會(huì)產(chǎn)生bug，我們?cè)賮?lái)做一些限制

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

看完上述內(nèi)容是否對(duì)您有幫助呢？如果還想對(duì)相關(guān)知識(shí)有進(jìn)一步的了解或閱讀更多相關(guān)文章，請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝您對(duì)創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司，的支持。


分享名稱：使用HTML5怎么實(shí)現(xiàn)移動(dòng)端簡(jiǎn)易進(jìn)度條-創(chuàng)新互聯(lián)
本文鏈接：http://weahome.cn/article/dpdpij.html

其他資訊

在線咨詢

微信咨詢

電話咨詢

028-86922220（工作日）

18980820575（7×24）

提交需求

返回頂部