最新赞助活动温馨提示:自愿赞助服务器费用,学生和没有工作的整站资源免费下载!
头像

jQuery横向手风琴菜单带标题和描述

来源:http://www.erdangjiade.com/ 沐浴春风 2015-08-27 16:37浏览(1508)

分享一个酷炫的手风琴菜单效果,鼠标悬浮在手风琴会显示标题和描述。你可以自定义图片,更改宽度,具体请看手风琴js代码。

0、请不要问“在不在”之类的问题,有问题直接问!1、学生或暂时没有工作的童鞋,整站资源免费下载!2、¥9.9充值终身VIP会员,加我微信,826096331 拉你进VIP群学习!3、程序员加油,技术改变世界。在线 充值

jQuery横向手风琴菜单带标题和描述
分类:图片代码 > 手风琴 难易:中级
查看演示 下载资源 下载积分: 30 积分

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.erdangjiade.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.erdangjiade.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.erdangjiade.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"); 
});
标签: 手风琴
声明:本文为原创文章,如需转载,请注明来源erdangjiade.com并保留原文链接:https://www.erdangjiade.com/js/451.html
评论0
头像

友情提示:垃圾评论一律封号 加我微信:826096331拉你进VIP群学习群

1 2