微客导航 » 文章资讯 » 简单实现jQuery手风琴效果

简单实现jQuery手风琴效果

2023-09-26 06:34:06 280

本文实例为大家分享了jQuery实现手风琴效果的具体代码，供大家参考，具体内容如下

js代码：



$(function(){
//获取所有li遍历
$(".li_list").each(function(){
//当鼠标进去当前li
$(this).mouseenter(function(){
//设置当前元素宽度
$(this).stop()
.animate({"width":"600px"},500,"linear");
//设置同胞元素宽度
.siblings().stop()
.animate({"width":"100px"},500,"linear");
});
});
});

css代码：

.li_list{
width:100px;
height:300px;
list-style:none;
float:left;
overflow:hidden;
}

.li_listimg{
width:100%;
height:100%;
}

.divbg{
width:600px;
height:300px;
background:rgba(230,0,0,0.5);
text-align:center;
line-height:300px;
float:left;
}

.divbgspan{
display:block;
width:100px;
height:300px;
float:left;
}

.div1{
width:500px;
height:300px;
float:left;
}
.mo{
width:600px;
}

html代码：




萌宠

萌宠

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

返回顶部
3162201930
czq8825@qq.com

简单实现jQuery手风琴效果

热门推荐

随机推荐