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

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

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

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

頁面結構代碼如下：

Css樣式如下：

Js代碼如下：

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

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

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

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

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

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

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

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

廣告

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

網(wǎng)站托管運營