1.tab切换案例
这个比较常用于一些支付软件，绑定银行卡之后点击不同的银行卡就可查看相应的信息之类的，见网图：
银行卡手风琴特效制作思路：
首先创建银行卡的盒子模型，然后添加点击动画，使得点击的时候，被点击的那页上滑显示，其他的下滑。点击别的页时，先前点击过得盒子和未被点击的盒子下滑。其次就是子盒子的隐藏出现问题，当点击时，对应的父元素上滑子元素显现，未被点击的下滑子元素隐藏。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{
margin:0;
padding:0;
}
html,body{
width:100%;
height:100%;
}
.box{
width:300px;
height:350px;
margin:10px auto;
position:relative;
top:100px;
}
#box1{
width:300px;
height:150px;
background-color: #58c381;
border-radius:13px 13px 0 0;
position:absolute;
top:0;
}
#box2{
width:300px;
height:150px;
background-color: #6aaaec;
border-radius:13px 13px 0 0;
position:absolute;
top:100px;
}
#box3{
width:300px;
height:150px;
background-color: #df83d6;
border-radius:13px 13px 0 0;
position:absolute;
top:200px;
}
.child{
width:300px;
height:200px;
position: relative;
top:100px;
box-sizing: border-box;
display:none;
border-radius: 0 0 4px 4px;
}
.c1{
border:1px solid #58c381;
}
.c2{
border:1px solid #6aaaec;
}
.c3{
border:1px solid #df83d6;
}
</style>
</head>
<body>
<div class="box">
<div id="box1">
<span>12345678990</span>
<div class="child c1">
我是银行卡1
</div>
</div>
<div id="box2">
<span>12345678990</span>
<div class="child c2">我是银行卡2</div>
</div>
<div id="box3">
<span>12345678990</span>
<div class="child c3">我是银行卡3</div>
</div>
</div>
<script src="js/jquery-1.9.1.js"></script>
<script>
$(".box>div").click(function(){
$(this).animate({
top:-50
},300).find(".child").slideDown(600).parent().siblings().children().slideUp(300);
$(this).siblings().each(function(index){
$(this).animate({
top:340+50*index
},300)
})
})
</script>
</body>
</html>
2.手风琴菜单制作
首先绘制菜单，然后制作页面。点击某一个盒子，其子盒子出现，其他的同级元素下移。再次点击同级元素上移子盒子隐藏。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{
margin:0;
padding:0;
}
.nav{
text-decoration: none;
width:100px;
text-align: center;
}
span{
display: inline-block;
background-color: rgb(88, 195, 129);
width:100%;
border: 1px solid #fff;
}
.menu {
display:none;
}
.menu>li{
height:30px;
line-height: 30px;
border-bottom:1px solid #fff;
box-sizing: border-box;
background-color: rgba(88, 195, 129, 0.51);
}
</style>
</head>
<body>
<div class="box">
<ul class="nav">
<li>
<span>鞋子</span>
<ul class="menu">
<li>包头凉鞋</li>
<li>马丁靴</li>
<li>罗马凉鞋</li>
</ul>
</li>
<li>
<span>裙子</span>
<ul class="menu">
<li>长裙</li>
<li>短裙</li>
<li>碎花裙</li>
</ul>
</li>
<li>
<span>上衣</span>
<ul class="menu">
<li>长袖</li>
<li>短袖</li>
<li>背心</li>
</ul>
</li>
</ul>
</div>
<script src="js/jquery-1.9.1.js"></script>
<script>
$(".nav>li").click(function(){
$(this).children(".menu").stop(false,true).slideToggle(600).siblings().children(".menu").stop(false,true);//阻止其抖动。
})
</script>
</body>
</html>
3.手风琴展示图片
制作思路：
放置五个图片，大小相同，需要点击图片后，被点击的那张图片不再隐藏且放大，其他的图片依次降低高度，宽度相同都为50px，呈现阶梯效果。
所需知识：
find（）;/*为数组中的每个元素都调用一次函数执行，如果没有符合条件的元素返回 undefined*/
源代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{
margin
最低0.47元/天 解锁文章
1465
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
