前言
jquery + html + css实现一个会拐弯的时间线
基于此网址整改，参考：https://www.jq22.com/webqd5873
效果
实现
基于jQuery，需要引入jQuery.js，没有必要使用太高版本，够用就行
jquery下载：https://www.jb51.net/zt/jquerydown.htm
html中
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="css/timeLine.css" />
</head>
<body>
<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>
</body>
<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="js/timeLine.js"></script>
</html>
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
}
/*IE下a: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 60px;
padding-top:100px;
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;
min-height:190px;
}
.odd-group .right-arrow {
min-height:190px;
}
.even-group .right-arrow {
display:none;
min-height:190px;
}
.right-arrow {
width: 190px;
border-top-right-radius: 50%;
border-bottom-right-radius: 50%;
border:2px solid #597dff;
border-left:none;
min-height:130px;
box-sizing:border-box;
float:right;
position: relative;
right: -58px;
}
.left-arrow {
width: 190px;
border-top-left-radius: 50%;
border-bottom-left-radius: 50%;
border:2px solid #597dff;
border-right:none;
min-height:130px;
box-sizing:border-box;
float:left;
position: relative;
left: -58px;
}
.even-group .left-arrow {
min-height:190px;
}
.odd-group .time-detail {
position:absolute;
left:30px;
right:30px;
top:-122px;
}
.even-group .time-detail {
position:absolute;
left:30px;
right:30px;
top: -122px;
}
.g-line {
height:2px;
background:#597dff;
position:absolute;
left:30px;
right:30px;
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 #597dff;
box-sizing: border-box;
position: absolute;
z-index: 99;
background: #ffffff;
bottom: -18px;
top: auto;
}
.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:#597dff;
box-sizing:border-box;
margin:2px;
}
.detail-m {
max-width: 100%;
display: inline-block;
padding: 10px;
background: #fbfbfb;
box-sizing: border-box;
border-radius: 5px;
height: 110px;
background: #fff;
box-shadow: #00000015 0 2px 5px 0;
}
.detail-m h3 {
font-weight:bold;
}
.detail-m p {
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
.floatLeft .detail-c {
float:left;
}
.disappear {
display:none!important;
}
js中
$(function() {
timeLine(6);
$("#btn").click(function() {
timeLine($(".test").val())
})
})
function timeLine(num) {
var timeHtml = '';
var numUp = Math.ceil(num / 5);
for (var i = 0; i < numUp; i++) {
if ((i + 1) % 2 == 1 && i == 0) {
timeHtml += '<div class="odd-group floatLeft first-group clearfix">'
} else if ((i + 1) % 2 == 1) {
timeHtml += '<div class="odd-group floatLeft clearfix">'
} else {
timeHtml += '<div class="even-group floatRight clearfix">'
}
timeHtml += '<div class="left-arrow"></div><div class="g-line"></div><div class="right-arrow"></div><div class="time-detail clearfix">'
for (var j = 5 * i; j < 5 * (i + 1); j++) {
if (j < num) {
timeHtml += '<div class="detail-c">' +
'<div class="detail-m">' +
'<h3>' + (j + 1) + '</h3>' +
'<p>这里可以填充你需要的内容 (｡･ω･｡)ﾉ♡</p>' +
'</div>' +
'<div class="circle">' +
'<div class="circle-son"></div>' +
'</div>' +
'</div>'
}
}
timeHtml += '</div></div>'
}
$(".time-wrapper").html(timeHtml);
if ($(".time-wrapper>div:last-child").hasClass("even-group")) {
$(".time-wrapper>div:last-child").find(".left-arrow").hide()
} else if ($(".time-wrapper>div:first-child").hasClass("odd-group")) {
$(".time-wrapper>div:last-child").find(".right-arrow").hide()
}
var circle = $(".circle");
$(circle[0]).children(".circle-son").hide();
$(circle[circle.length - 1]).children(".circle-son").hide();
}