酷js手风琴效果
你一定用了书签，你一定把你的书做了书签。你见过书签导航吗？你一定见过手风琴，你一定知道拉手风琴时它的形状变化。你见过手风琴导航吗？如果没有，请往下看：
前面的话：
这篇博文首先通过Javascript做了一个简单的手风琴效果，让大家对手风琴效果有一定的了解；然后，我们更改jquery来做类似的手风琴效果。前两个例子很简单，然后我想放大一下。想用JQ或者原生JS做类似淘宝的手风琴效果。回到书签的问题，既然JQ和JS可以达到这么酷的效果，那我们可以用CSS3做手风琴效果的书签吗？
用Javascript做一个简单的手风琴效果：不用多说，我们先来编码：
！DOCTYPE html html head meta charset=' utf-8 '/title/title style * { margin 3360 0；padd : 0；} body { background-color : rgba(0，0，0， 8)；} div { margin: 20px auto} # c { width: 500pxheight: 300px飞越：隐藏；} p { float: left宽度： 20px；height: 300px}/style/head body div id=' c ' p style=' background : # 9cf；宽度width:420px'1/p p style=' background : # f9c；'2/p p style=' background : # c9f；'3/p p style=' background : # cf9；'4/p p style=' background : # 9fc；'5/p /div /body/html效果：
分析：不使用JS，只能通过改变P的宽度来模仿手风琴效果，然后忽略人为因素的影响，让鼠标经过每一个P的时候，P的宽度发生变化。
这里我们知道我们需要改变p的宽度，所以下一步很简单。我们可以通过上面介绍的Javascript动画的相关方法来获得想要的效果(点击：Javascript动画相关)。参考代码如下：
function accordion(){ var Div=document . getelementbyid(' c ')；var Divs=Div . GetElementsBytagname(' p ')；var I=0；var t=nullfor(I=0；i Divs.lengthi ) { Divs[i]。索引=I；Divs[i]。onmouseover=function(){ var index=this . index；if(t){ clearInterval(t)；} t=setInterval(function(){ var iWidth=500；for(I=0；i Divs.lengthi ) { if(index！=Divs[i]。index) { var iSpeed=(20 - Divs[i]。offsetwithts)/5；iSpeed=iSpeed 0？数学天花板：数学地板；Divs[i].style.width=Divs[i]。offsetWidth iSpeed ' pxiWidth -=Divs[i]。offsetWidth};};divs[index]. style . width=iWidth ' px '；}, 30);};} }手风琴()；上面的代码没有解释。点击网站：http://sandbox.runjs.cn/show/daapxxo9查看代码运行后的结果。
使用jquery制作类似的手风琴效果：
之前的效果不是很简单。下面再加一点难度。有以下要求：
1.将前面的背景颜色更改为图片
2.添加文本
3.用jquery实现它
让我们先完成html代码：
目的地想象
