在该笔记中将学到列表展示中手风琴效果的方法与展示效果
效果介绍
手风琴效果的显示效果是，在多项列表进行展示的时候，当鼠标悬停在其中一项上，对该项的显示效果进行凸显：比如字体放大，图片放大，亮度变高等。
显示效果如下：
当鼠标悬停在其他的项目时：
实现方法：使用 transition 和 element.hover 结合，在鼠标悬停的项目上，进行 CSS 样式的修改，并且用 transition 添加效果渐变
<html>
<head>
<title>手风琴效果</title>
<meta charset="utf-8">
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.wrap{
width: 480px;
height: 120px;
margin: 100px auto;
border: 1px solid #DFDFDF;
}
.wrap li {
width: 120px;
height: 120px;
float: left;
overflow: hidden;
position: relative;
}
.wrap li h3,p,.price{
width: 80px;
}
.wrap li a{
display: block;
padding: 4px 10px;
text-decoration: none;
width: 90px;
}
.wrap li h3{
font-size: 14px;
font-weight: 700;
color: #fa2a5d;
}
.wrap li p{
font-size: 12px;
color: #868686;
}
.wrap li .price{
font-size: 14px;
font-style: italic;
color: #fa2a5d;
}
.wrap li img{
width: 90px;
height: 90px;
position: absolute;
bottom: 0;
right: 0;
}
.wrap .line{
position: absolute;
right: 0;
bottom: 0;
width: 0;
height: 120px;
border: 1px dashed black;
}
.wrap .mask{
width: 120px;
height: 120px;
position: absolute;
top:0;
left: 0;
background-color: #333;
opacity: 0;
}
.wrap:hover .mask{
opacity: 0.15;
}
.wrap li.big:hover .mask{
opacity: 0;
width: 240px;
}
.wrap li.big{
width: 240px;
}
.wrap li.big h3{
font-size: 18px;
}
.wrap li.big p{
font-size: 14px;
}
.wrap li.big .price{
font-size: 18px;
}
.wrap li.big img{
width: 120px;
height: 120px;
}
.wrap ul *{
transition: all 0.25s;
-moz-transition: all 0.25s; /* Firefox 4 */
-webkit-transition: 0.25s; /* Safari 和 Chrome */
-o-transition: all 0.25s; /* Opera */
}
</style>
<script>
window.onload = function() {
var wrap = document.getElementsByClassName("wrap")[0],
list = wrap.getElementsByTagName("li"),
i, len;
for(i = 0, len=list.length; i<len; i++) {
list[i].addEventListener("mouseover", function(){
var This = this;
if(This.className !== "big") {
var wrap = document.getElementsByClassName("wrap")[0],
list = wrap.getElementsByTagName("li"),j;
for (j = 0; j<list.length; j++) {
list[j].className = null;
}
This.className = "big";
}
})
}
}
</script>
</head>
<body>
<div class="wrap">
<ul>
<li style="background-color: #cbb9f8">
<a href="">
<h3>食品保健</h3>
<p>3碗仅98元</p>
<p class="price"><strong>1</strong><i>折起</i></p>
<img src="http://ofjjubwp5.bkt.clouddn.com/image/png/img35.png" alt="">
<i class="line"></i>
<i class="mask"></i>
</a>
</li>
<li style="background-color: #ede0e0" >
<a href="">
<h3>食品保健</h3>
<p>3碗仅98元</p>
<p class="price"><strong>1</strong><i>折起</i></p>
<img src="http://ofjjubwp5.bkt.clouddn.com/image/png/img35.png" alt="">
<i class="line"></i>
<i class="mask"></i>
</a>
</li>
<li style="background-color: #e2bfbf" class="big">
<a href="">
<h3>食品保健</h3>
<p>3碗仅98元</p>
<p class="price"><strong>1</strong><i>折起</i></p>
<img src="http://ofjjubwp5.bkt.clouddn.com/image/png/img35.png" alt="">
<i class="mask"></i>
</a>
</li>
</ul>
</div>
</body>
</html>