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

 
實現思路是根據進度條拖動的距離來算百分比，然后根據百分比來改變每個圖片的寬度，
頁面結構代碼如下：

 
Css樣式如下：


 
Js代碼如下：

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

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

 
圖中liwidht 是根據圖片顯示數量寬度占比在拖動進度條的過程中 ul 的實時寬度，然后就是將這個實時變化的寬度賦值給 ul ：

這里因為jquery寫簡單一些，就沒用js來賦值。
到這里上述的效果基本就完成了，效果如下：



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