18168733823 在线客服 意见反馈 返回顶部
行业动态 技术分享

进阶时间轴

2019-12-12 分享

效果图



 

页面

<div class="clearfix time-wrapper"></div>
<div style="padding: 20px;margin-top: 100px">
    <p>输入数量,生成时间线</p>
    <input type="number" class="test" value="0">
    <button id="btn">生成</button>

</div>

CSS

* {
	word-wrap:break-word
}
html,body,h1,h2,h3,h4,h5,h6,hr,p,,dl,dt,dd,ul,ol,li,pre,form,button,input,textarea,th,td,fieldset {
	margin:0;
	padding:0
}
ul,ol,dl {
	list-style-type:none
}
html,body {
	*position:static
}
html {
	font-family:sans-serif;
	-webkit-text-size-adjust:100%;
	-ms-text-size-adjust:100%
}
address,caption,cite,code,dfn,em,th,var {
	font-style:normal;
	font-weight:400
}
input,button,textarea,select,optgroup,option {
	font-family:inherit;
	font-size:inherit;
	font-style:inherit;
	font-weight:inherit
}
input,button {
	overflow:visible;
	vertical-align:middle;
	outline:none
}
body,th,td,button,input,select,textarea {
	font-family:"Microsoft Yahei","Hiragino Sans GB","Helvetica Neue",Helvetica,tahoma,arial,Verdana,sans-serif,"WenQuanYi Micro Hei","\5B8B\4F53";
	font-size:14px;
	color:#333;
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale
}
h1,h2,h3,h4,h5,h6 {
	font-size:100%
}
a,area {
	outline:none;
	blr:expression(this.=this.blur())
}
a {
	text-decoration:none;
	cursor:pointer
}
a:hover {
	text-decoration:underline;
	outline:none
}
a.ie6:hover {
	zoom:1
}
a:focus {
	outline:none
}
a:hover,a:active {
	outline:none
}
:focus {
	outline:none
}
sub,sup {
	vertical-align:baseline
}
button,input[type="button"],input[type="submit"] {
	line-height:normal !important
}
/*img*/
img {
	border:0;
	vertical-align:middle
}
a img,img {
	-ms-interpolation-mode:bicubic
}
.img-responsive {
	max-width:100%;
	height:auto
}
/*IEa:hover 背景闪烁*/
*html {
	overflow:-moz-scrollbars-vertical;
	zoom:expression(function(ele) {
	ele.style.zoom = "1";
	document.execCommand("BackgroundImageCache",false,true)
}
(this))}/*HTML5 reset*/
header,footer,section,aside,details,menu,article,section,nav,address,hgroup,figure,figcaption,legend {
	display:block;
	margin:0;
	padding:0
}
time {
	display:inline
}
audio,canvas,video {
	display:inline-block;
	*display:inline;
	*zoom:1
}
audio:not([controls]) {
	display:none
}
legend {
	width:100%;
	margin-bottom:20px;
	font-size:21px;
	line-height:40px;
	border:0;
	border-bottom:1px solid #e5e5e5
}
legend small {
	font-size:15px;
	color:#999
}
svg:not(:root) {
	overflow:hidden
}
fieldset {
	border-width:0;
	padding:0.35em 0.625em 0.75em;
	margin:0 2px;
	border:1px solid #c0c0c0
}
input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button {
	height:auto
}
input[type="search"] {
	-webkit-appearance:textfield;
	/* 1 */-moz-box-sizing:content-box;
	-webkit-box-sizing:content-box;
	/* 2 */box-sizing:content-box
}
input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration {
	-webkit-appearance:none
}
/*
Name:style_clearfix
Example:class="clearfix|cl"
Explain:Clearfix(简写cl)避免因子元素浮动而导致的父元素高度缺失能问题
*/
table {
	border-collapse:collapse;
	border-spacing:0;
}
input:hover {
	border:1px solid #067BBB!important;
}
input:focus {
	border:1px solid #067BBB;
	outline:0;
}
.cl:after,.clearfix:after {
	content:".";
	display:block;
	height:0;
	clear:both;
	visibility:hidden
}
.cl,.clearfix {
	zoom:1
}
.btn {
	border:none;
	border-radius:4px;
	cursor:pointer;
}
.form-control {
	display:inline-block;
	width:100%;
	height:34px;
	margin:0 auto;
	box-sizing:border-box;
	padding:6px 12px;
	font-size:14px;
	line-height:34px;
	color:#555;
	background-color:#fff;
	background-image:none;
	border:1px solid #ccc;
	border-radius:4px;
	-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075);
	box-shadow:inset 0 1px 1px rgba(0,0,0,.075);
	-webkit-transition:border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
	-o-transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s;
	transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}
.btn-primary {
	background:rgb(46,117,183);
	color:#FFFFFF;
}
.btn-primary:hover {
	background:rgba(46,117,183,0.8);
}
.btn-default {
	background:#FFFFFF;
	border:1px solid #c9c9c9;
}
.left {
	float:left;
}
.right {
	float:right;
}
.time-wrapper {
	width:100%;
	padding:40px;
	padding-top:120px;
	box-sizing:border-box;
}
.time-wrapper>div {
	width:100%;
	position:relative;
	margin-top:-2px;
}
.time-wrapper>div.first-group {
	margin-top:80px;
}
.odd-group .left-arrow {
	display:none;
}
.even-group .right-arrow {
	display:none;
}
.right-arrow {
	width:26px;
	border-top-right-radius:26px;
	border-bottom-right-radius:26px;
	border:2px solid #1BBC9B;
	border-left:none;
	min-height:130px;
	box-sizing:border-box;
	float:right;
}
.left-arrow {
	width:26px;
	border-top-left-radius:26px;
	border-bottom-left-radius:26px;
	border:2px solid #1BBC9B;
	border-right:none;
	min-height:130px;
	box-sizing:border-box;
	float:left;
}
.even-group .left-arrow {
	min-height:220px;
}
.odd-group .time-detail {
	position:absolute;
	left:30px;
	right:30px;
	top:-80px;
}
.even-group .time-detail {
	position:absolute;
	left:30px;
	right:30px;
	top:12px;
}
.g-line {
	height:2px;
	background:#1BBC9B;
	position:absolute;
	left:26px;
	right:26px;
	top:0;
}
.time-detail .detail-c {
	width:20%;
	box-sizing:border-box;
	float:left;
	position:relative;
	padding:0 10px;
}
.floatRight .detail-c {
	float:right;
}
.time-detail .detail-c .circle {
	width:12px;
	height:12px;
	border-radius:50%;
	border:1px solid #1BBC9B;
	box-sizing:border-box;
	position:absolute;
	z-index:99;
	background:#ffffff;
}
.odd-group .circle {
	bottom:-19px;
}
.even-group .circle {
	top:-18px;
}
.time-detail .detail-c .circle .circle-son {
	width:6px;
	height:6px;
	border-radius:50%;
	background:#1BBC9B;
	box-sizing:border-box;
	margin:2px;
}
.detail-m {
	max-width:100%;
	display:inline-block;
	padding:10px 15px;
	background:#F3F3F3;
	box-sizing:border-box;
}
.detail-m h3 {
	font-weight:bold;
	padding:5px 0;
}
.detail-m p {
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
}
.floatLeft .detail-c {
	float:left;
}
.disappear {
	display:none!important;
}

JS

* {
	word-wrap:break-word
}
html,body,h1,h2,h3,h4,h5,h6,hr,p,,dl,dt,dd,ul,ol,li,pre,form,button,input,textarea,th,td,fieldset {
	margin:0;
	padding:0
}
ul,ol,dl {
	list-style-type:none
}
html,body {
	*position:static
}
html {
	font-family:sans-serif;
	-webkit-text-size-adjust:100%;
	-ms-text-size-adjust:100%
}
address,caption,cite,code,dfn,em,th,var {
	font-style:normal;
	font-weight:400
}
input,button,textarea,select,optgroup,option {
	font-family:inherit;
	font-size:inherit;
	font-style:inherit;
	font-weight:inherit
}
input,button {
	overflow:visible;
	vertical-align:middle;
	outline:none
}
body,th,td,button,input,select,textarea {
	font-family:"Microsoft Yahei","Hiragino Sans GB","Helvetica Neue",Helvetica,tahoma,arial,Verdana,sans-serif,"WenQuanYi Micro Hei","\5B8B\4F53";
	font-size:14px;
	color:#333;
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale
}
h1,h2,h3,h4,h5,h6 {
	font-size:100%
}
a,area {
	outline:none;
	blr:expression(this.=this.blur())
}
a {
	text-decoration:none;
	cursor:pointer
}
a:hover {
	text-decoration:underline;
	outline:none
}
a.ie6:hover {
	zoom:1
}
a:focus {
	outline:none
}
a:hover,a:active {
	outline:none
}
:focus {
	outline:none
}
sub,sup {
	vertical-align:baseline
}
button,input[type="button"],input[type="submit"] {
	line-height:normal !important
}
/*img*/
img {
	border:0;
	vertical-align:middle
}
a img,img {
	-ms-interpolation-mode:bicubic
}
.img-responsive {
	max-width:100%;
	height:auto
}
/*IEa:hover 背景闪烁*/
*html {
	overflow:-moz-scrollbars-vertical;
	zoom:expression(function(ele) {
	ele.style.zoom = "1";
	document.execCommand("BackgroundImageCache",false,true)
}
(this))}/*HTML5 reset*/
header,footer,section,aside,details,menu,article,section,nav,address,hgroup,figure,figcaption,legend {
	display:block;
	margin:0;
	padding:0
}
time {
	display:inline
}
audio,canvas,video {
	display:inline-block;
	*display:inline;
	*zoom:1
}
audio:not([controls]) {
	display:none
}
legend {
	width:100%;
	margin-bottom:20px;
	font-size:21px;
	line-height:40px;
	border:0;
	border-bottom:1px solid #e5e5e5
}
legend small {
	font-size:15px;
	color:#999
}
svg:not(:root) {
	overflow:hidden
}
fieldset {
	border-width:0;
	padding:0.35em 0.625em 0.75em;
	margin:0 2px;
	border:1px solid #c0c0c0
}
input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button {
	height:auto
}
input[type="search"] {
	-webkit-appearance:textfield;
	/* 1 */-moz-box-sizing:content-box;
	-webkit-box-sizing:content-box;
	/* 2 */box-sizing:content-box
}
input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration {
	-webkit-appearance:none
}
/*
Name:style_clearfix
Example:class="clearfix|cl"
Explain:Clearfix(简写cl)避免因子元素浮动而导致的父元素高度缺失能问题
*/
table {
	border-collapse:collapse;
	border-spacing:0;
}
input:hover {
	border:1px solid #067BBB!important;
}
input:focus {
	border:1px solid #067BBB;
	outline:0;
}
.cl:after,.clearfix:after {
	content:".";
	display:block;
	height:0;
	clear:both;
	visibility:hidden
}
.cl,.clearfix {
	zoom:1
}
.btn {
	border:none;
	border-radius:4px;
	cursor:pointer;
}
.form-control {
	display:inline-block;
	width:100%;
	height:34px;
	margin:0 auto;
	box-sizing:border-box;
	padding:6px 12px;
	font-size:14px;
	line-height:34px;
	color:#555;
	background-color:#fff;
	background-image:none;
	border:1px solid #ccc;
	border-radius:4px;
	-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075);
	box-shadow:inset 0 1px 1px rgba(0,0,0,.075);
	-webkit-transition:border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
	-o-transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s;
	transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}
.btn-primary {
	background:rgb(46,117,183);
	color:#FFFFFF;
}
.btn-primary:hover {
	background:rgba(46,117,183,0.8);
}
.btn-default {
	background:#FFFFFF;
	border:1px solid #c9c9c9;
}
.left {
	float:left;
}
.right {
	float:right;
}
.time-wrapper {
	width:100%;
	padding:40px;
	padding-top:120px;
	box-sizing:border-box;
}
.time-wrapper>div {
	width:100%;
	position:relative;
	margin-top:-2px;
}
.time-wrapper>div.first-group {
	margin-top:80px;
}
.odd-group .left-arrow {
	display:none;
}
.even-group .right-arrow {
	display:none;
}
.right-arrow {
	width:26px;
	border-top-right-radius:26px;
	border-bottom-right-radius:26px;
	border:2px solid #1BBC9B;
	border-left:none;
	min-height:130px;
	box-sizing:border-box;
	float:right;
}
.left-arrow {
	width:26px;
	border-top-left-radius:26px;
	border-bottom-left-radius:26px;
	border:2px solid #1BBC9B;
	border-right:none;
	min-height:130px;
	box-sizing:border-box;
	float:left;
}
.even-group .left-arrow {
	min-height:220px;
}
.odd-group .time-detail {
	position:absolute;
	left:30px;
	right:30px;
	top:-80px;
}
.even-group .time-detail {
	position:absolute;
	left:30px;
	right:30px;
	top:12px;
}
.g-line {
	height:2px;
	background:#1BBC9B;
	position:absolute;
	left:26px;
	right:26px;
	top:0;
}
.time-detail .detail-c {
	width:20%;
	box-sizing:border-box;
	float:left;
	position:relative;
	padding:0 10px;
}
.floatRight .detail-c {
	float:right;
}
.time-detail .detail-c .circle {
	width:12px;
	height:12px;
	border-radius:50%;
	border:1px solid #1BBC9B;
	box-sizing:border-box;
	position:absolute;
	z-index:99;
	background:#ffffff;
}
.odd-group .circle {
	bottom:-19px;
}
.even-group .circle {
	top:-18px;
}
.time-detail .detail-c .circle .circle-son {
	width:6px;
	height:6px;
	border-radius:50%;
	background:#1BBC9B;
	box-sizing:border-box;
	margin:2px;
}
.detail-m {
	max-width:100%;
	display:inline-block;
	padding:10px 15px;
	background:#F3F3F3;
	box-sizing:border-box;
}
.detail-m h3 {
	font-weight:bold;
	padding:5px 0;
}
.detail-m p {
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
}
.floatLeft .detail-c {
	float:left;
}
.disappear {
	display:none!important;
}
 
在线咨询
Copyright © 2019 江苏如斯镁科技有限公司 版权所有 苏ICP备19052370号-3   友情链接: 在线商城 网站地图