手风琴效果
外层宽度=4折叠图片宽度+1展开图片宽度
高度固定不变
鼠标经过时，添加遮罩层，当前鼠标所在图片展开，并且遮罩层 看不见，其余图片折叠，有遮罩层
通过在鼠标经过时，给当前 li 添加 类，在 css 中进行样式区别
HTML 代码：
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
body,
ul,
li,
p {
margin: 0;
padding: 0
}
ul,
ol {
list-style: none;
}
.home-subjects-v2 {
height: 128px;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border: 1px solid #d3d3d3;
border-color: rgba(0, 0, 0, .12);
overflow: hidden;
width: 938px;
margin-top: 12px;
background: #fff
}
.home-subjects-v2 ul {
width: 1000px
}
.home-subjects-v2 li {
width: 156px;
height: 128px;
float: left;
overflow: hidden;
-webkit-transition: all .1s linear;
-moz-transition: all .1s linear;
-o-transition: all .1s linear;
-ms-transition: all .1s linear;
transition: all .1s linear
}
.home-subjects-v2 li * {
-webkit-transition: all .1s linear;
-moz-transition: all .1s linear;
-o-transition: all .1s linear;
-ms-transition: all .1s linear;
transition: all .1s linear
}
.home-subjects-v2 li a {
width: 156px;
height: 128px;
display: block;
position: relative;
cursor: pointer;
text-decoration: none;
overflow: hidden
}
.home-subjects-v2 li a:hover {
position: absolute
}
.home-subjects-v2 li a:hover .mask {
-ms-filter: "alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
-webkit-transition: opacity .2s ease-in;
-moz-transition: opacity .2s ease-in;
-o-transition: opacity .2s ease-in;
-ms-transition: opacity .2s ease-in;
transition: opacity .2s ease-in
}
.home-subjects-v2 li img {
height: 72px;
width: 117px;
position: absolute;
bottom: 0;
right: -13px
}
.home-subjects-v2 li .line {
height: 128px;
width: 0;
font-size: 0;
border-right: 1px dashed #cacaca;
position: absolute;
right: 0;
top: 4px
}
.home-subjects-v2 li .info {
position: absolute;
top: 0;
left: 0;
width: 136px;
padding: 4px 10px
}
.home-subjects-v2 li .info h3 {
font-size: 14px;
font-weight: 700
}
.home-subjects-v2 li .info p {
color: #868686;
font-size: 12px;
overflow: hidden;
width: 136px;
height: 22px;
line-height: 22px
}
.home-subjects-v2 li .info p.price {
font-size: 14px;
font-style: italic;
color: #fa2a5d;
height: 35px
}
.home-subjects-v2 li .info p.price strong {
font-size: 22px;
font-family: Arial;
padding-right: 2px
}
.home-subjects-v2 li .info p.price i {
font-size: 14px
}
.home-subjects-v2 li .info p.more {
display: none
}
.home-subjects-v2 .mask {
height: 128px;
width: 156px;
display: block;
position: absolute;
top: 0;
left: 0;
background: #000;
-ms-filter: "alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
-webkit-transition: opacity .2s ease-in;
-moz-transition: opacity .2s ease-in;
-o-transition: opacity .2s ease-in;
-ms-transition: opacity .2s ease-in;
transition: opacity .2s ease-in;
_display: none!important
}
.home-subjects-v2 .big {
width: 314px
}
.home-subjects-v2 .big a {
width: 314px
}
.home-subjects-v2 .big img {
width: 195px;
height: 120px;
right: 0;
bottom: 0
}
.home-subjects-v2 .big .info {
width: 294px
}
.home-subjects-v2 .big .info h3 {
font-size: 18px
}
.home-subjects-v2 .big .info p {
font-size: 14px;
width: 166px
}
.home-subjects-v2 .big .info p.price {
font-size: 16px;
padding-top: 7px
}
.home-subjects-v2 .big .info p.price strong {
font-size: 28px
}
.home-subjects-v2 .big .info p.price i {
font-size: 16px
}
.home-subjects-v2 .big .info p.more {
display: block;
font-size: 12px;
color: #ff2a5b
}
.home-subjects-v2 .big .mask {
width: 314px
}
.home-subjects-v2:hover .mask {
-ms-filter: "alpha(Opacity=15)";
filter: alpha(opacity=15);
opacity: .15;
-webkit-transition: opacity .2s ease-in;
-moz-transition: opacity .2s ease-in;
-o-transition: opacity .2s ease-in;
-ms-transition: opacity .2s ease-in;
transition: opacity .2s ease-in
}
</style>
<script type="text/javascript" src="jquery-1.9.1.js"></script>
</head>
<body>
<div id="subject" class="home-subjects-v2">
<ul>
<li>
<a>
<img src="http://gtms01.alicdn.com/tps/i1/T1Lvt3Fv4kXXbA5QAK-195-120.jpg_Q90.jpg">
<div class="info">
<h3 style="color:#f62368">聚美妆</h3>
<p>聚美妆1/2周年庆</p>
<p class="price"><strong>1</strong><i>折起</i></p>
<p class="more">进入专题抢购 > </p>
</div>
<s class="line"></s>
<i class="mask"></i>
</a>
</li>
<li class="big">
<a>
<img src="http://gtms01.alicdn.com/tps/i1/T1qxGLFsVbXXbA5QAK-195-120.jpg_Q90.jpg">
<div class="info">
<h3 style="color:#ff578a">Baby购</h3>
<p>宝宝该换装了，新品抢购</p>
<p class="price"><strong>2.5</strong><i>折起</i></p>
<p class="more">进入专题抢购 > </p>
</div>
<s class="line"></s><i class="mask"></i>
</a>
</li>
<li>
<a>
<img src="http://gtms02.alicdn.com/tps/i2/T1KOSNFxXaXXbA5QAK-195-120.jpg_Q90.jpg">
<div class="info">
<h3 style="color:#6d3fa7">时装团</h3>
<p>时尚春装，清新小潮搭配</p>
<p class="price"><strong>1</strong><i>折起</i></p>
<p class="more">进入专题抢购 > </p>
</div>
<s class="line"></s> <i class="mask"></i>
</a>
</li>
<li>
<a>
<img src="http://gtms04.alicdn.com/tps/i4/T1CCeIFrVbXXbA5QAK-195-120.jpg_Q90.jpg">
<div class="info">
<h3 style="color:#d61939">TV购</h3>
<p>补血养颜 就这么简单</p>
<p class="price"><strong>2.6</strong><i>折起</i></p>
<p class="more">进入专题抢购 > </p>
</div>
<s class="line"></s><i class="mask"></i>
</a>
</li>
<li>
<a>
<img src="http://gtms01.alicdn.com/tps/i1/T1jmKJFyJbXXbA5QAK-195-120.jpg_Q90.jpg">
<div class="info">
<h3 style="color:#6f9400">聚新鲜</h3>
<p>最纯正的泰国香米</p>
<p class="price"><strong>5</strong><i>折起</i></p>
<p class="more">进入专题抢购 > </p>
</div>
<i class="mask"></i>
</a>
</li>
</ul>
</div>
</body>
</html>
JS 代码：
/*function bind(el,eleType,callBack){
if(el.addEventListener){
el.addEventListener(eleType,callBack,false);
}
else if(el.attachEvent){
el.attachEvent('on'+eleType,callBack)
}
}*/
function bind(el, eleType, callBack) {
if(typeof el.addEventListener === "function") {
el.addEventListener(eleType, callBack, false);
} else if(typeof el.attachEvent === "function") {
el.attachEvent('on' + eleType, callBack);
}
}
function mouseoverHandler(e) {
var target = e.target || e.srcElement;
var outer = document.getElementById("subject");
var list = outer.getElementsByTagName("li");
for(var i = 0; i < list.length; i++) {
list[i].className = "";
}
while(target.tagName != "LI" && target.tagName != "BODY") {
target = target.parentNode;
}
target.className = "big";
}
function init() {
var outer = document.getElementById("subject");
var list = outer.getElementsByTagName("li");
for(var i = 0; i < list.length; i++) {
bind(list[i], "mouseover", mouseoverHandler)
}
}
init();
