手风琴效果

外层宽度=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();

posted @ 2017-04-11 16:19 linfang.zhou 阅读(186) 评论(0) 收藏举报

刷新页面返回顶部

linfang.zhou

手风琴效果

公告