分享一个酷炫的手风琴菜单效果,鼠标悬浮在手风琴会显示标题和描述。你可以自定义图片,更改宽度,具体请看手风琴js代码。
HTML
<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="http://www.sucaihuo.com/js"><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="http://www.sucaihuo.com/js"><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="http://www.sucaihuo.com/js"><p class="bt_1">服饰</p><p class="bt_2"><span>封面明星故事</span><span>2015春夏趋势</span><span>我爱海淘</span></p></a></div>
</li>
</ul>
鼠标离开或者悬浮手风琴动画效果
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() {
$(this).eq(_index7).stop().animate({width: 106}, 500);
$(".imgCen").css("display", "none");
});
$(".flash4 ul li").mouseout(function() {
$(this).eq(_index7).stop().animate({width: 106}, 500);
$("p.bt_2").css("display", "none");
});
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791