近期项目❖中遇到一□□个有点意□□□□思的效果，在一定范□□□□围内根据□□进度条的◥进度来显□□示图片的◆数量，效果图如□□下：
 

 
实现思路□□是根据进•度条拖动□□□□的距离来□□□算百分比，然后根据□□□百分比来○改变每个□□□□图片的宽□□度，
页面结构代码如下：

 
Css样式如下：


 
Js代码如下：

 
因为进度□□□□条最多只□□□有100%，所以就需□□□□要根据显□□示的图片□□□数量来设□□置每张图□□□□片宽度的□□□□占比，这里是要□□□显示16张图片，在进度条□□进度为0的时候，只显示一○张，进度条进□□□□度达到100%的时候要□□□□显示16张，也就是4X4排列，所以每张□□□图片的宽◎度占比是25%。又因为整□□□□个显示区□□域的大小□□是固定的，也就是说□□□□当进度条□□进度为0的时候，每张图片□□的实际宽□□□度是这个□□□区域的宽□□□□度，也就是说♦存放图片□□□的模块宽□□□度是这个△区域宽度□□□的400%，如图中样□□式：

理清了图◉片显示的□□□思路之后◥就要思考□□□□如何实现◤了，这里我是□□通过运用Js来实现进□□度条的拖□□□动效果，同时运用js来获取进□□□度条的进◆度值，如下：

 
图中liwidht 是根据图◎片显示数□□□□量宽度占□□□□比在拖动□□□□进度条的□□□□过程中 ul 的实时宽□□□□度，然后就是▽将这个实□□时变化的◉宽度赋值□□□□给 ul ：

这里因为jquery写简单一些，就没用js来赋值。
到这里上述的效果基本就完成了，效果如下：



 
后期可能□□□□会研究一□□□□下点击进□□度条改变□□□□进度来直□□□接显示对□□应的图片□□□□数量，只能通过□□□□拖动进度◣条来改变□□显示图片□□的数量功◣能太单一※了。暂时就这□□□□样吧。