炫酷的js手风琴效果

你一定用过书签，也一定给你的书本加过书签，那么你见过书签式的导航吗？ 你一定见过手风琴，也一定知道弹奏手风琴时的它的外形变化，那么你见过手风琴式的导航吗？ 如果没有，请往下看：

前面的话：

　　这篇博文先通过Javascript做一个简单的手风琴效果，让大家对手风琴效果有一定的了解；紧接着，我们换jquery做类似的手风琴效果。前面的两个例子都很简单，接下来要放大招了，我想用JQ或是原生的JS去做类似淘宝网中用到的手风琴效果。继续回到书签问题，既然JQ和JS都能实现那么炫酷的效果，我们用CSS3能不能做出手风琴效果的书签来呢？

用Javascript做一个简单的手风琴效果： 话不多说，我们先上代码：

rush:xhtml;">

效果：

分析：在不使用JS的情况下，我们只能通过改变p的宽度，来模仿手风琴效果，然后我们忽略人为因素的影响，让其在鼠标经过每个p时，该p的宽度发生变化。

这里我们知道了要改变p的宽度，那么接下来就简单了，我们用前面介绍过的关于Javascript动画的相关方法就可以得到我们想要的效果（点击：）。参考代码如下：

0 ? Math.ceil(iSpeed) : Math.floor(iSpeed); Divs[i].style.width = Divs[i].offsetWidth + iSpeed + 'px'; iWidth -= Divs[i].offsetWidth; }; }; Divs[index].style.width = iWidth + 'px'; },30); }; } } accordion();

上面的代码不做解释，代码运行后的结果点击网址： http://sandbox.runjs.cn/show/daapxxo9 查看。

用jquery做类似的手风琴效果：

前面的效果是不是觉得很简单，下面我们加一点点难度，有如下要求：

1、将前面的背景颜色换成图片

2、增加文字

3、用jquery实现

先来完成我们的html代码：