轻松实现jquery的手风琴效果

JQuery动画给大家的特效是手风琴，就不多说了。让我们看看最终的渲染。

一、实施原则分析。

相应的透视图：

二、HTML代码分析。

body div id=' container ' ul id=' content ' liclass=' first ' h3true/h3div img src=' http 3360 images/0 . jpg '/div/Li liclass=' second ' H3 ' s/H3 div img src=' http : images/1 . jpg '/div/Li liclass=' third ' H3爱/H3 div img src=' http : images/2 . jpg '/div/Li liclass=' fortune ' h3you/id为container的div是上面分析中的红色区域。2.带有内容id的ul用于存储所有li。

3.每个li是红色区域和相应图片的组合。

第三，CSS代码分析。

* { margin : 0；padd : 0；} img { border:0} #容器{ width:680pxheight: 300pxmargin: 100px自动；相对位置：border:3px纯红；飞越：隐藏；} #容器#内容{ list-style : none；} #容器#内容li { width:590px高度：300 px；绝对位置：} # container # content Li . second { left :590 px；} # container # content Li . third { left :620 px；} #容器#内容Li . forth { left :650 px；} #容器#内容li h3 { float:left宽度： 24px；height:294pxborder:3px纯蓝；背景-颜色：黄色；cursor:指针；} #容器#内容li div{左侧浮动：宽度： 560 px；高度：300 px；} 1.*和img标签用于移除系统默认间隙和其他效果。2.#container是上面分析的可视区域，所以它的大小是680 * 300，它是所有子元素的容器，所以是相对的(position: relative)。

3.# container #内容是为了摆脱ul默认的圆点效果。

4.所有li都是绝对定位的，大小为590 * 300，然后设置下面li的左值，并将li的h3(黄色区域)属性设置为float。

当上面所有的css样式都设置好之后，最终的渲染效果就是分析图中的效果。

第四，JQuery代码分析。

手风琴js交互代码其实很简单，就是实时改变li绝对位置对应的左值，代码如下：

$(function(){ $(' # container # content Li。第一H3 ' .鼠标输入(function(){ $(' # container # content Li。第二个').停止()。animate({'left':590}，1000)；$('#container #content li.third ').停止()。animate({'left':620}，1000)；$(' #容器#内容李。第四节).停止()。animate({'left':650}，1000)；});$(' #容器#内容李。第二H3 ' .鼠标输入(function(){ $(' # container # content Li。第二个').停止()。动画({'left':30}，1000)；$('#container #content li.third ').停止()。animate({'left':620}，1000)；$(' #容器#内容李。第四节).停止()。animate({'left':650}，1000)；});$(' #容器#内容李。第三H3 ' .鼠标输入(function(){ $(' # container # content Li。第二个').停止()。动画({'left':30}，1000)；$('#container #content li.third ').停止()。animate({'left':60}，1000)；$(' #容器#内容李。第四节).停止()。animate({'left':650}，1000)；});$(' #容器#内容李。第四H3 ' .鼠标输入(function(){ $(' # container # content Li。第二个').停止()。动画({'left':30}，1000)；$('#container #content li.third ').停止()。animate({'left':60}，1000)；$(' #容器#内容李。第四节).停止()。animate({'left':90}，1000)；});});以上就是本文的全部内容，希望对大家的学习有所帮助。