jquery实现手风琴效果

本文实例讲述了jquery实现手风琴效果的代码。分享给大家供大家参考。具体如下：

效果过程就是当鼠标覆盖图片时，这张图片的宽度变大，其他兄弟图片宽度变小，效果如下：

具体代码如下

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' hearteta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8'/titlejQuery横向手风琴图片展示动画演示演示/title link href=' CSS/style。' CSS '类型=' text/CSS ' rel='样式表'/脚本类型=' text/JAVAScript ' src=' http : js/jquery。量滴js /脚本/head dy！-手风琴效果-div class=' flash4 ' ulli class=' first ' div class=' imgTop ' img src=' http : images/Ruili _ img 1。jpg ' width=' 538 ' height=' 405 ' alt=' class=' TM '/div class=' IMgcen '给你15分钟做"对"的时尚人/div class=' IMgbot ' a href=' p class=' Bt _ 1 '服饰/pp class='bt_2'span封面明星故事/spanspan2015春夏趋势/spanspan我爱海淘/span/p/a/div/Lili div class=' IMgTop ' img src=' http : images/Ruili _ img 2。jpg ' width=' 538 ' height=' 405 ' alt=' '//div class=' imgCen '蒂芙尼为你吟唱一曲自然颂/div class=' IMgbot ' a href=' p class=' Bt _ 1 '服饰/pp class='bt_2'span封面明星故事/spanspan2015春夏趋势/spanspan我爱海淘/span/p/a/div/Lili div class=' IMgTop ' img src=' http : images/Ruili _ img 3。jpg ' width=' 538 ' height=' 405 ' alt=' '//div class=' IMgcen '瑞丽妆线上精品轻杂志/div class=' IMgbot ' a href=' p class=' Bt _ 1 '服饰/pp class='bt_2'span封面明星故事/spanspan2015春夏趋势/spanspan我爱海淘/span/p/a/div/Lili div class=' IMgTop ' img src=' http : images/Ruili _ img 4。jpg ' width=' 538 ' height=' 405 ' alt=' '//div class=' imgCen ' 《ar》刘海造型女孩只需这样即刻焕然一新/div class=' IMgbot ' a href=' p class=' Bt _ 1 '服饰/pp class='bt_2'span封面明星故事/spanspan2015春夏趋势/spanspan我爱海淘/span/p/a/div/Lili div class=' IMgTop ' img src=' http : images/Ruili _ img 5。jpg ' width=' 538 ' height=' 405 ' alt=' '//div class=' imgCen '电影大明星见证传奇从戛纳诞生/div class=' IMgbot ' a href=' p class=' Bt _ 1 '服饰/pp class='bt_2'span封面明星故事/spanspan2015春夏趋势/spanspan我爱海淘/span/p/a/div/Lili div class=' IMgTop ' img src=' http : images/Ruili _ img 6。jpg ' width=' 538 ' height=' 405 ' alt=' '//div class=' IMgcen '重返20岁试用周/div class=' IMgbot ' a href=' p class=' Bt _ 1 '服饰/pp class='bt_2'span封面明星故事/spanspan2015春夏趋势/spanspan我爱海淘/span/p/a/div/Lili class=' last ' div class=' IMgTop ' img src=' http : images/Ruili _ img 7。jpg ' width=' 538 ' height=' 405 ' alt=' '//div class=' imgCen '玩美女孩盖天天阳光女神进阶攻略/div class=' IMgbot ' a href=' p class=' Bt _ 1 '服饰/pp class='bt_2'span封面明星故事/spanspan2015春夏趋势/spanspan我爱海淘/span/p/a/div/li/ul/div！-手风琴结束-script src=' http : js/script。js ' type=' text/JavaScript '/script div style=' text-align : center；clear : both '/div/body/HTMlCSS代码：

@ charset“utf-8”；* { margin :0 pxpadding :0 px字体系列： '微软雅黑；font-size :12 px文本装饰：无；列表样式-:型无；} img { border:0px}/*开始*/.flash4 {宽度：1180 px高度：450 pxmargin:0pxauto边距-底部：20 px位置：相对；} .flash4 ul li { width:106px高度：450 px边框-左侧：1px实心# 000;位置：相对；飞越：隐藏；float:left}.flash4 ul li .imgTop img { opa city 33600.4 } . flash4 ul Li .imgTop img。TM { opa city 33601}.flash4 ul li .imgCon { width :538 pxh three :405 px } . flash4 ul Li .imgCen { width:538px高度：50 pxbackground:rgba(0，0，0，0.5)；color : # ffffont-size :20 px；线高：50 px位置：绝对；left :0 pxbottom :45 extextext-缩进：20 pxdisplay:none}.flash4 ul li .imgBot { width :538 pxh three :45 px背景： # 222;}.flash4 ul li .imgBot p . Bt _ 1 {宽度：80 px线高：45 pxfont-size :16 pxcolor : # ffft ext-缩进：20 pxfloat:left}.flash4 ul li .imgBot p . Bt _ 2 {宽度：458 px高度：45px线高：45 pxfloat : leftisplay : none } . flash4 ul Li .imgBot p . Bt _ 2 span { font-size :14 px；color: # fff填充-右侧：30 px背景：url(./images/part2_icon.png)不重复左中；填充-左侧：10 px} .李。第一个{ width :538 px} .李。最后{位置：绝对；right :0 pxbottom :0 px } jQuery代码：

//手风琴动画效果var指数7=0；//定义变量，赋值为0;$(.李说.鼠标输入(function(){ index 7=$(this)).index()；$(这个)。停止()。动画({width:538}，500).兄弟姐妹('里').停止()。动画({width:106}，500)；$('.img cen ').等式（指数7)。css('显示'，'块').兄弟姐妹('。img cen ').css('display '，' none ')；$('p.bt_2 ').等式（指数7)。css('显示'，'块').兄弟姐妹(' p.bt_2 ').css('display '，' none ')；$('.imgTop img ').等式（指数7)。addClass('tm ').兄弟姐妹('。imgTop img ').移除CLaSS(' TM ')；});$(.李说.mouseleave(函数(){$(此)).等式（指数7)。停止()。动画({width:538}，500)；$('.img cen ').css('display '，' none ')；$('p.bt_2 ').css('display '，' none ')；});源码下载：jquery实现手风琴效果

希望大家会喜欢分享的jquery手风琴效果。