用js做鼠標(biāo)拖動(dòng)進(jìn)度條實(shí)現(xiàn)顯示多張縮略圖
近期項(xiàng)目中遇到一個(gè)有點(diǎn)意思的效果,在一定范圍內(nèi)根據(jù)進(jìn)度條的進(jìn)度來(lái)顯示圖片的數(shù)量,效果圖如下:
實(shí)現(xiàn)思路是根據(jù)進(jìn)度條拖動(dòng)的距離來(lái)算百分比,然后根據(jù)百分比來(lái)改變每個(gè)圖片的寬度,
頁(yè)面結(jié)構(gòu)代碼如下:
Css樣式如下:
Js代碼如下:
因?yàn)檫M(jìn)度條最多只有100%,所以就需要根據(jù)顯示的圖片數(shù)量來(lái)設(shè)置每張圖片寬度的占比,這里是要...