近期項目中遇到一個有點意思的效果，在一定范圍內(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ù)量功能太單一了。暫時就這樣吧。