轩辕剑官网手风琴特效
css代码部分
<style>
body{
margin: 0;/*外边距*/
}
ul{ /*ul*/
list-style-type: none;
/*无序列表li标签去掉小黑圆点*/
margin:0;/*外边距*/
padding:0;/*内边距*/
}
.accordion{ /*div*/
width:1124px;/*div的宽度*/
height:438px;/*div的高度*/
margin:50px auto 0 auto;
/*盒子距离上 右 下 左 的外边距*/
}
.accordion ul .list-item{ /*li*/
float:left;/*使5个li标签向左浮动*/
width:86px;/*li宽度*/
height:438px;/*li高度*/
background-image: url("bg.jpg");/*li标签背景图片*/
transition: 1s;/*设置时间为1s*/
}
.accordion ul .list-item:nth-child(1){ /*选择第几个li标签 添加背景图片*/
background-image: url(pic1-on.jpg);
}
.accordion ul .list-item:nth-child(2){
background-image: url(pic2-on.jpg);
}
.accordion ul .list-item:nth-child(3){
background-image: url(pic3-on.jpg);
}
.accordion ul .list-item:nth-child(4){
background-image: url(pic4-on.jpg);
}
.accordion ul .list-item:nth-child(5){
background-image: url(pic5-on.jpg);
}
.accordion ul .show{ /*宽度变为780px*/
width:780px;
}
.list-item img{
opacity:1;/*透明度0-1 0全透明 0.5半透明 1不透明*/
}
.show img{ /*图片为全透明*/
opacity:0;
}
</style>
html/JS代码部分
<body>
<div class="accordion">
<ul>
<li class="list-item"><img src="pic1.png"></li>
<li class="list-item"><img src="pic2.png"></li>
<li class="list-item show"><img src="pic3.png"></li> <!--插入图片-->
<li class="list-item"><img src="pic4.png"></li>
<li class="list-item"><img src="pic5.png"></li>
</ul>
</div>
<script src="jquery.min.js"></script>
<script>
$(".list-item").click(function(){
/*点击this 添加一个类名 show 它的兄弟元素(其它list-item) 去除类名 show*/
$(this).addClass("show").siblings().removeClass("show");
});
</script>
</body>
文件夹