前言：
此刻咱们对“jquery简单的手风琴菜单效果视频”大概比较着重，小伙伴们都想要知道一些“jquery简单的手风琴菜单效果视频”的相关内容。那么小编同时在网络上搜集了一些关于“jquery简单的手风琴菜单效果视频””的相关资讯，希望各位老铁们能喜欢，朋友们快快来了解一下吧！今天小编给大家分享一个滑动特效代码
废话不多说，上干货！
更多特效代码请添加HTML5前端交流群581549454
CSS代码：
@charset "utf-8";
body{background-color: #252525}
*{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:0px auto;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.fast{position:absolute;right:0px;bottom:0px;}
JS代码：
//手风琴动画效果
var _index7=0;
$(".flash4 ul li").mouseover(function(){
_index7=$(this).index();
$(this).stop().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").mouseout(function(){
$(".imgCen").css("display","none");
$("p.bt_2").css("display","none");
});
网站整体代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery带标题的图片滑动手风琴代码</title>
<link href="css/style.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery.min.js"></script>
</head>
<body><script src="/demos/googlegg.js"></script>
<div class="flash4" style="margin-top: 50px">
<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="fast">
<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;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';color:#ffffff">
<p>适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。</p>
<p>来源：<a href="" target="_blank">素材</a></p>
</div>
</body>
</html>
标签： #jquery简单的手风琴菜单效果视频
