Html
    Css
    Js

    
                        
html,body {
	margin:0;
}
ul {
	white-space:nowrap;
	margin:0;
}
ul li {
	outline:none;
	display:inline-block;
	list-style-type:none;
	margin:0px;
}
.cx-time-main {
	width:50%;
	height:80px;
	margin-left:auto;
	margin-right:auto;
}
.cx-time-main > span {
	width:20px;
	height:80px;
	line-height:80px;
	float:left;
	font-size:30px;
	font-weight:600;
	color:rgb(18,175,255);
	cursor:pointer;
	font-family:'宋体'
}
.cx-time-box {
	float:left;
	width:calc(100% - 42px);
	height:80px;
	margin:0;
	padding:0;
	overflow:hidden;
}
.cx-round-box {
	position:relative;
	width:12px;
	height:100%;
}
.cx-time-round {
	position:relative;
	width:12px;
	height:12px;
	top:50%;
	margin-top:-6px;
	background:rgba(18,175,255,0.8);
	border-radius:50%;
	cursor:pointer;
}
.cx-time-top {
	position:absolute;
	bottom:50%;
	left:-15px;
	width:120px;
	min-height:20px;
	height:auto;
	font-size:14px;
	margin-bottom:12px;
}
.cx-time-bottom {
	position:absolute;
	top:50%;
	left:-30px;
	width:120px;
	min-height:20px;
	height:auto;
	font-size:14px;
	margin-top:12px;
}
.cx-time-line {
	position:relative;
	width:150px;
	height:100%
}
.cx-time-line:after {
	position:absolute;
	content:'';
	width:100%;
	height:2px;
	top:50%;
	background:rgba(18,175,255,0.8)
}
.cx-time-round:hover,.cx-time-active .cx-time-round {
	width:16px;
	height:16px;
	top:49%;
	left:-2px;
	background:rgba(129,71,181,0.8);
}
.cx-time-active > div {
	color:rgb(129,71,181);
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.3
 立即下载

jQuery时间轴选择器

更新时间:2020-05-29 00:13:12

0