华为网盘下载：
百度网盘下载：
你还未登录，请选登录!
分享HTML我帮您
收款人：邓志锋 luc***@
收款人：向html580网站(**锋)付钱提供主流cms教程
提供数据库教程和设计
提供各种常见网页js代码
提供常用的JS特效代码及在线演示
提供jQuery插件教程及插件下载
提供服务器常见问题及教程
提供站长技术、站长资讯等内容
提供常用开发手册和开发工具
您现在的位置：& >
jQuery扁平风格手风琴式菜单效果
内容介绍jQuery扁平风格手风琴式菜单效果
js代码如下：
$(function(){&
$('dd').filter(':nth-child(n)').addClass('hidden');&
$('dl').on('click',&'dt',&function()&{&
.slideDown(300)&
.siblings('dd')&
.slideUp(300);&
generateFont();&
&/script&&
下载资源：144 次
下载积分：0 积分
转载请注明（B5教程网）原文链接：
网友评论：jquery实现手风琴效果
作者：魔芋铃
字体：[ ] 类型：转载 时间：
这篇文章主要介绍了jquery实现手风琴效果，像手风琴一样打开，立体感效果比较强，感兴趣的小伙伴们可以参考一下
本文实例讲述了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"&
&meta http-equiv="Content-Type" content="text/ 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&
&!--手风琴效果--&
&div class="flash4"&
&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&
&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&
&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&
&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&
&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&
&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 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&
&!--手风琴结束--&
&script src="js/script.js" type="text/javascript"&&/script&
&div style="text-align:clear:"&
&CSS代码：
@charset"utf-8";
*{margin:0padding:0font-family:"微软雅黑";font-size:12 text-decoration:list-style-type:}
img{border:0}
.flash4{width:1180height:450margin:0margin-bottom:20position:}
.flash4 ul li{width:106height:450border-left:1px solid #000;position:overflow:float:}
.flash4 ul li .imgTop img{opacity:0.4;}
.flash4 ul li .imgTop img.tm{opacity:1;}
.flash4 ul li .imgCon{width:538height:405}
.flash4 ul li .imgCen{width:538height:50background:rgba(0,0,0,0.5);color:#font-size:20line-height:50position:left:0bottom:45text-indent:20display:}
.flash4 ul li .imgBot{width:538height:45background:#222;}
.flash4 ul li .imgBot p.bt_1{width:80line-height:45font-size:16color:#text-indent:20float:}
.flash4 ul li .imgBot p.bt_2{width:458height:45line-height:45float:display:}
.flash4 ul li .imgBot p.bt_2 span{font-size:14color:#padding-right:30background:url(../images/part2_icon.png)no-padding-left:10}
.flash4 ul li.first{width:538}
.flash4 ul li.last{position:right:0bottom:0}
jQuery代码：
//手风琴动画效果
var index7 =0;//定义变量，赋值为0；
$(".flash4 ul li").mouseenter(function(){
index7 = $(this).index();
$(this).stop().animate({
},500).siblings("li").stop().animate({
$(".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({
$(".imgCen").css("display","none");
$("p.bt_2").css("display","none");
源码下载：
希望大家会喜欢分享的jquery手风琴效果。
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具搜索end -->
UI效果非常不错的jQuery平面手风琴特效
作者/代码整理：&&(转载请附加本文地址，带有“懒人原生”字样的谢绝转载) 发布日期：
效果描述：
jQuery手风琴效果
这次主要推荐的理由是设计效果非常不错
也可以作为banner焦点图使用
使用方法：
1、将head中的样式引入到你的网页中
2、将body里的代码部分拷贝到你需要的地方即可
(注意保持图片路径正确)
猜你喜欢...脚本简介jquery横向手风琴效果是一款基于jquery实现的左右滑动手风琴图片轮播切换特效。
大小:299KB
特别说明：
本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
各线路极速下载器通过p2p加速功能，帮助用户对于大文件能更好的加速下载。
其他普通下载点限制多线程，仅允许直接点击或另存为下载等单线程下载的软件，较适合小的文件下载！
如有侵犯您的版权，请及时联系(#换@)，我们将尽快处理。
& CopyRight , , Inc.All Rights Reserved.