这是一个手风琴效果,第一个加了透明度,第二个人没有加透明度的变革以是显得比较清晰一点,

1.他首先布局是一个大div里面包裹六张图片,当然根据需求相加多少便是多少张,

2.先把所有的图片加个float,让他们并在一排,

html5自适应手风琴html5手风琴后果透明度切换 PHP

3所有的图片都设为宽度都设为一样;比如都设为50px;如果须要加透明度的切换也可以加上,

4.给第一个元素标签加上你想要他展示的最大宽度,如果想要合理点看着舒畅,用大div的宽度-第一个的宽度,然后除以剩下的5张就行了;这相称于添加一个classname名,可以通过classname来进行切换。

5.静态的效果基本出来,然后便是添加JS了,你可以用jqureyl来就做,想对大略一点,你自己就不须要写运动了。

6.直接用animate就行。
在animate下设宽度的变革。

7.这一步鼠标滑上的时候便是当当前的宽度变大时,其他所有的宽度都要变小。
可以加个韶光看多少韶光之内变革。

基本思路便是这样了。

8。

$(\"大众#outer .inner\"大众).stop().eq($(this).index()).animate({

\"大众width\"大众:640+\"大众px\"大众

},1000).siblings().animate({

\公众width\公众:50+\"大众px\"大众},1000)