jquery时间线

 

需求：基于jquery + html + css实现一个会拐弯的时间线

效果：如上图

实现：

        html

<div class="clearfix time-wrapper"></div>

        js

var num = 8;//num 为时间线节点数量
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();
}

        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:50px;
    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:4px dashed #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:4px dashed #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;
    border: 2px dashed #597dff;
    /*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:0px 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;
  }

综上就实现啦~