免费观看又色又爽又黄的小说免费_美女福利视频国产片_亚洲欧美精品_美国一级大黄大色毛片

用js做鼠標(biāo)拖動進(jìn)度條實現(xiàn)顯示多張縮略圖(js鼠標(biāo)按下拖動div)

2024-04-21    分類： 網(wǎng)站建設(shè)

近期項目中遇到一個有點意思的效果，在一定范圍內(nèi)根據(jù)進(jìn)度條的進(jìn)度來顯示圖片的數(shù)量，效果圖如下：

實現(xiàn)思路是根據(jù)進(jìn)度條拖動的距離來算百分比，然后根據(jù)百分比來改變每個圖片的寬度，

頁面結(jié)構(gòu)代碼如下：

Css樣式如下：

Js代碼如下：

因為進(jìn)度條最多只有100%，所以就需要根據(jù)顯示的圖片數(shù)量來設(shè)置每張圖片寬度的占比，這里是要顯示16張圖片，在進(jìn)度條進(jìn)度為0的時候，只顯示一張，進(jìn)度條進(jìn)度達(dá)到100%的時候要顯示16張，也就是4X4排列，所以每張圖片的寬度占比是25%。又因為整個顯示區(qū)域的大小是固定的，也就是說當(dāng)進(jìn)度條進(jìn)度為0的時候，每張圖片的實際寬度是這個區(qū)域的寬度，也就是說存放圖片的模塊寬度是這個區(qū)域?qū)挾鹊?00%，如圖中樣式：

理清了圖片顯示的思路之后就要思考如何實現(xiàn)了，這里我是通過運用Js來實現(xiàn)進(jìn)度條的拖動效果，同時運用js來獲取進(jìn)度條的進(jìn)度值，如下：

圖中l(wèi)iwidht 是根據(jù)圖片顯示數(shù)量寬度占比在拖動進(jìn)度條的過程中 ul 的實時寬度，然后就是將這個實時變化的寬度賦值給 ul ：
這里因為jquery寫簡單一些，就沒用js來賦值。

到這里上述的效果基本就完成了，效果如下：

后期可能會研究一下點擊進(jìn)度條改變進(jìn)度來直接顯示對應(yīng)的圖片數(shù)量，只能通過拖動進(jìn)度條來改變顯示圖片的數(shù)量功能太單一了。暫時就這樣吧。

以上就是關(guān)于用js做鼠標(biāo)拖動進(jìn)度條實現(xiàn)顯示多張縮略圖(js鼠標(biāo)按下拖動div)，希望對你有幫助，更多內(nèi)容關(guān)注創(chuàng)新互聯(lián)。

網(wǎng)頁題目：用js做鼠標(biāo)拖動進(jìn)度條實現(xiàn)顯示多張縮略圖(js鼠標(biāo)按下拖動div)
URL網(wǎng)址：http://m.newbst.com/news42/324642.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供微信公眾號、網(wǎng)站維護(hù)、靜態(tài)網(wǎng)站、關(guān)鍵詞優(yōu)化、App開發(fā)、

廣告

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

網(wǎng)站托管運營