本文實例講述了jquery實現手風琴效果的代碼。分享給大家供大家參考。具體如下：
效果過程就是當鼠標覆蓋圖片時，這張圖片的寬度變大，其他兄弟圖片寬度變小，效果如下：
具體代碼如下
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title>jQuery橫向手風琴圖片展示動畫DEMO演示</title><link href="css/style.css" type="text/css" rel="stylesheet"/><script type="text/javascript" src="js/jquery.min.js"></script></head><body><!--手風琴效果--><div class="flash4"><ul><li class="first"><div class="imgTop"><img src="images/ruili_img1.jpg" width="538" height="405" alt=""class="tm"/></div><div class="imgCen">給你15分鐘做“對”的時尚人</div><div class="imgBot"><a href=""><p class="bt_1">服飾</p><p class="bt_2"><span>封面明星故事</span><span>2015春夏趨勢</span><span>我愛海淘</span></p></a></div></li><li><div class="imgTop"><img src="images/ruili_img2.jpg" width="538" height="405" alt=""/></div><div class="imgCen">蒂芙尼為你吟唱一曲自然頌</div><div class="imgBot"><a href=""><p class="bt_1">服飾</p><p class="bt_2"><span>封面明星故事</span><span>2015春夏趨勢</span><span>我愛海淘</span></p></a></div></li><li><div class="imgTop"><img src="images/ruili_img3.jpg" width="538" height="405" alt=""/></div><div class="imgCen">瑞麗?妝線上精品輕雜志</div><div class="imgBot"><a href=""><p class="bt_1">服飾</p><p class="bt_2"><span>封面明星故事</span><span>2015春夏趨勢</span><span>我愛海淘</span></p></a></div></li><li><div class="imgTop"><img src="images/ruili_img4.jpg" width="538" height="405" alt=""/></div><div class="imgCen">《ar》劉海造型女孩只需這樣即刻煥然一新</div><div class="imgBot"><a href=""><p class="bt_1">服飾</p><p class="bt_2"><span>封面明星故事</span><span>2015春夏趨勢</span><span>我愛海淘</span></p></a></div></li><li><div class="imgTop"><img src="images/ruili_img5.jpg" width="538" height="405" alt=""/></div><div class="imgCen">電影×大明星見證傳奇從戛納誕生</div><div class="imgBot"><a href=""><p class="bt_1">服飾</p><p class="bt_2"><span>封面明星故事</span><span>2015春夏趨勢</span><span>我愛海淘</span></p></a></div></li><li><div class="imgTop"><img src="images/ruili_img6.jpg" width="538" height="405" alt=""/></div><div class="imgCen">重返20歲試用周</div><div class="imgBot"><a href=""><p class="bt_1">服飾</p><p class="bt_2"><span>封面明星故事</span><span>2015春夏趨勢</span><span>我愛海淘</span></p></a></div></li><li class="last"><div class="imgTop"><img src="images/ruili_img7.jpg" width="538" height="405" alt=""/></div><div class="imgCen">玩美女孩蓋天天陽光女神進階攻略</div><div class="imgBot"><a href=""><p class="bt_1">服飾</p><p class="bt_2"><span>封面明星故事</span><span>2015春夏趨勢</span><span>我愛海淘</span></p></a></div></li></ul></div><!--手風琴結束--><script src="js/script.js" type="text/javascript"></script><div style="text-align:center;clear:both;"></div></body></html>
CSS代碼：
@charset"utf-8";*{margin:0px;padding:0px;font-family:"微軟雅黑";font-size:12px; text-decoration:none;list-style-type:none;}img{border:0px;}/*開始*/.flash4{width:1180px;height:450px;margin:0pxauto;margin-bottom:20px;position:relative;}.flash4 ul li{width:106px;height:450px;border-left:1px solid #000;position:relative;overflow:hidden;float:left;}.flash4 ul li .imgTop img{opacity:0.4;}.flash4 ul li .imgTop img.tm{opacity:1;}.flash4 ul li .imgCon{width:538px;height:405px;}.flash4 ul li .imgCen{width:538px;height:50px;background:rgba(0,0,0,0.5);color:#fff;font-size:20px;line-height:50px;position:absolute;left:0px;bottom:45px;text-indent:20px;display:none;}.flash4 ul li .imgBot{width:538px;height:45px;background:#222;}.flash4 ul li .imgBot p.bt_1{width:80px;line-height:45px;font-size:16px;color:#fff;text-indent:20px;float:left;}.flash4 ul li .imgBot p.bt_2{width:458px;height:45px;line-height:45px;float:left;display:none;}.flash4 ul li .imgBot p.bt_2 span{font-size:14px;color:#fff;padding-right:30px;background:url(../images/part2_icon.png)no-repeat left center;padding-left:10px;}.flash4 ul li.first{width:538px;}.flash4 ul li.last{position:absolute;right:0px;bottom:0px;}jQuery代碼：
//手風琴動畫效果var index7 =0;//定義變量，賦值為0；$(".flash4 ul li").mouseenter(function(){index7 = $(this).index();$(this).stop().animate({width:538},500).siblings("li").stop().animate({width:106},500);$(".imgCen").eq(index7).css("display","block").siblings(".imgCen").css("display","none");$("p.bt_2").eq(index7).css("display","block").siblings("p.bt_2").css("display","none");$(".imgTop img").eq(index7).addClass("tm").siblings(".imgTop img").removeClass("tm");});$(".flash4 ul li").mouseleave(function(){$(this).eq(index7).stop().animate({width:538},500);$(".imgCen").css("display","none");$("p.bt_2").css("display","none");});源碼下載：jquery實現手風琴效果
希望大家會喜歡分享的jquery手風琴效果。
新聞熱點
疑難解答
