微客导航 » 文章资讯 » jQuery实现王者荣耀手风琴效果

jQuery实现王者荣耀手风琴效果

2023-08-02 23:51:03 174

效果

思路分析:

1.鼠标经过某个小li有两步操作：
2.当前小li宽度变为224px，同时里面的小图片淡出，大图片淡入
3.其余兄弟小li宽度变为69px，小图片淡入，大图片淡出

代码实现略。(详情参考源代码)






手风琴案例


*{
margin:0;
padding:0;
}

img{
display:block;
}

ul{
list-style:none;
}

.king{
width:852px;
margin:100pxauto;
background:url(images/bg.png)no-repeat;
overflow:hidden;
padding:10px;
}

.kingul{
overflow:hidden;
}

.kingli{
position:relative;
float:left;
width:69px;
height:69px;
margin-right:10px;
}

.kingli.current{
width:224px;
}

.kingli.current.big{
display:block;
}

.kingli.current.small{
display:none;
}

.big{
width:224px;
display:none;
}

.small{
position:absolute;
top:0;
left:0;
width:69px;
height:69px;
border-radius:5px;
}







$(function(){
//鼠标经过某个小li有两步操作：
$(".kingli").mouseenter(function(){
//1.当前小li宽度变为224px，同时里面的小图片淡出，大图片淡入
//不能写成find('.small').stop().fadeOut().siblings().find('.big').stop
$(this).stop().animate({
width:224
}).find(".small").stop().fadeOut().siblings(".big").stop().fadeIn();
//2.其余兄弟小li宽度变为69px，小图片淡入，大图片淡出
$(this).siblings("li").stop().animate({
width:69
}).find(".small").stop().fadeIn().siblings(".big").stop().fadeOut();
})
});

以上就是本次介绍的案例代码全部内容，如果大家有不同写法和意见可以联系小编。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
3162201930
czq8825@qq.com

jQuery实现王者荣耀手风琴效果

热门推荐

随机推荐