近期項(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è)置每張圖片寬度的占比，這里是要顯示16張圖片，在進(jìn)度條進(jìn)度為0的時(shí)候，只顯示一張，進(jìn)度條進(jìn)度達(dá)到100%的時(shí)候要顯示16張，也就是4X4排列，所以每張圖片的寬度占比是25%。又因?yàn)檎麄€(gè)顯示區(qū)域的大小是固定的，也就是說(shuō)當(dāng)進(jìn)度條進(jìn)度為0的時(shí)候，每張圖片的實(shí)際寬度是這個(gè)區(qū)域的寬度，也就是說(shuō)存放圖片的模塊寬度是這個(gè)區(qū)域?qū)挾鹊?00%，如圖中樣式：

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

 
圖中l(wèi)iwidht 是根據(jù)圖片顯示數(shù)量寬度占比在拖動(dòng)進(jìn)度條的過(guò)程中 ul 的實(shí)時(shí)寬度，然后就是將這個(gè)實(shí)時(shí)變化的寬度賦值給 ul ：

這里因?yàn)閖query寫(xiě)簡(jiǎn)單一些，就沒(méi)用js來(lái)賦值。
到這里上述的效果基本就完成了，效果如下：



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