前端那些事之时间轴篇

2019独角兽企业重金招聘Python工程师标准>>>

一个简易的时间轴实现

css

#section .detail-box {
	padding-left: 20px;
	width: 280px;
}

#section .detail-size {
	position: relative;
	padding-left: 0px;
	overflow: hidden;
}

#section .text {
	position: relative;
	width: 200px;
	height: 100px;
	top: -31px;
	left: 130px;
}

#section .detail-lineup {
	width: 3px;
	height: 100%;
	background-color: green;
	position: absolute;
	left: 5px;
	z-index: -1;
}

#section .detail-box ul li {
	padding-left: 25px;
	font-size: 14px;
	color: #333333;
	line-height: 30px;
	margin-bottom: 30px;
	background: url(../../imgs/common/about4_icon.png) left center no-repeat;
}

#section .detail-box ul li:last-child {
	margin-bottom: 0px;
}

html

<div class="detail-size">
						<div class="detail-lineup"></div>
						<ul class="detail-line">
							<li><div id="detail-createdDate"></div> <span class="text"></span></li>
							<li><div id="detail-allotTime"></div> <span class="text"></span></li>
							<li><div id="deatil-dateConnecting"></div> <span class="text"></span></li>
							<li><div id="detail-dateDispatch"></div> <span class="text"></span></li>
							<li><div id="detail-dateStartoff"></div> <span class="text"></span></li>
							<li><div id="detail-dateArrive"></div> <span class="text"></span></li>
							<li><div id="detail-cancelTime"></div> <span class="text"></span></li>
						</ul>
					</div>

js

// 实现时间轴
	var h = $(".detail-box ul li:first-child").height() / 2;
	var h1 = $(".detail-box ul li:last-child").height() / 2;
	$(".detail-lineup").css("top", h);
	$(".detail-lineup").height($(".detail-box").height() - h1 - h);

转载于:https://my.oschina.net/yongxinke/blog/872278