js实现时间轴自动排列效果     作者：   本文主要介绍了js实现新增加事件：时间轴自动排列效果的实例，具有很好的参考价值。下面跟着小编一起来看下吧

效果图：

代码如下：

 !DOCTYPE html 
 html lang="en" 
 head 
 meta charset="UTF-8" 
 title timeline /title 
 script src="jquery.min.js" /script 
 !-- script src="JavaScript/jquery-1.7.1.min.js" /script -- 
 style 
 ul,li{
 list-style: none;
 body{
 font-family: "microsoft yahei";
 .clearfix:after {
 content: ".";
 display: block;
 height: 0;
 visibility: hidden;
 clear: both;
 .cont{
 width:1000px;
 margin:0 auto;
 .biz-timeline-box{
 width:785px;
 margin: 0 auto 45px;
 /*奇数 odd*/
 .biz-timeline-box:nth-child(odd) .biz_timeline-eventbox{
 -webkit-border-radius: 0 40px 40px 0;
 -moz-border-radius: 0 40px 40px 0;
 border-radius: 0 40px 40px 0;
 float:right;
 /*偶数 even*/
 .biz-timeline-box:nth-child(even) .biz_timeline-eventbox{
 -webkit-border-radius: 40px 0 0 40px;
 -moz-border-radius: 40px 0 0 40px;
 border-radius: 40px 0 0 40px;
 float:left;
 /*奇数 odd*/
 .biz-timeline-box:nth-child(odd) .biz_timeline-event{
 -webkit-border-radius:0 30px 30px 0;
 -moz-border-radius:0 30px 30px 0;
 border-radius:0 30px 30px 0;
 /*偶数 even*/
 .biz-timeline-box:nth-child(even) .biz_timeline-event{
 -webkit-border-radius: 30px 0 0 30px;
 -moz-border-radius: 30px 0 0 30px;
 border-radius: 30px 0 0 30px;
 .biz-timeline-box:nth-child(odd) .biz_timeline-time{
 float:left;
 width:344px;
 text-align: right;
 .biz-timeline-box:nth-child(even) .biz_timeline-time{
 float:right;
 width:344px;
 text-align: left;
 .biz-timeline-box:nth-child(even) .biz_timeline-node{
 float:right;
 .biz-timeline-box:nth-child(odd) .biz_timeline-node{
 float:left;
 .biz_timeline-time{
 font-size:16px;
 color:#d81919;
 font-weight: 600;
 line-height:73px;
 .biz_timeline-eventbox{
 width: 336px;
 height: 69px;
 border: 4px solid #d94646;
 text-align: center;
 .biz_timeline-event{
 width:323px;
 height:57px;
 margin:6px;
 color:#fff;
 background:#d94646;
 text-align: center;
 font-size:16px;
 line-height:57px;
 .biz_timeline-node{
 width:8px;
 height:8px;
 border-radius: 50%;
 background: #fff;
 border:4px solid #b22b2b;
 margin:29px 40px;
 .biz_longString{
 position:absolute;
 left:50%;
 width:8px;
 height:200px;
 background:#bfbfbf;
 top:-57px;
 z-index:10;
 margin-left:-4px;
 .biz_timtline-box{
 position: relative;
 margin-top:100px;
 .biz_timeline{
 z-index:20;
 position:relative;
 .biz_title{
 text-align: center;
 margin:0 auto 35px;
 .biz_title h2{
 font-size:28px;
 color:#d81919;
 .biz_title p{
 color:#eca7a7;
 margin-top:15px;
 /style 
 /head 
 body 
 div 
 div 
 h2 发展历程 /h2 
 p CONMPANY HISTORY /p 
 /div 
 div 
 div 
 div 
 div 2012.12 /div 
 div /div 
 div 
 div 公司成立 /div 
 /div 
 /div 
 div 
 div 2013.02 /div 
 div /div 
 div 
 div 园区业务方向 /div 
 /div 
 /div 
 div 
 div 2014.03 /div 
 div /div 
 div 
 div 获天使轮投资900万元 /div 
 /div 
 /div 
 div 
 div 2013.09 /div 
 div /div 
 div 
 div 业务转型互联网营销 /div 
 /div 
 /div 
 div 
 div 2016.06 /div 
 div /div 
 div 
 div V1.0版本上线 /div 
 /div 
 /div 
 div 
 div 2017.03 /div 
 div /div 
 div 
 div 期待。。。。 /div 
 /div 
 /div 
 /div 
 div /div 
 /div 
 /div 
 script 
$(function(){
 $(".biz_longString").css('height',$(".biz-timeline-box").size()*124+57);
 /script 
 /body 
 /html 

说明：新增一个时间节点：复制 的div。

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持凡科！