js实现时间轴自动排列效果

网络编程 2021-07-04 19:20www.168986.cn编程入门

本文主要介绍了js实现新增加事件时间轴自动排列效果的实例，具有很好的参考价值。狼蚁网站SEO优化跟着长沙网络推广一起来看下吧

效果图

代码如下

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>timeline</title>
 <script src="http://7xnlea.2.z0.glb.qiniucdn./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;
 }
 .-timeline-box{
  width:785px;
  margin: 0 auto 45px;
 }
 /奇数 odd/
 .-timeline-box:nth-child(odd) ._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/
 .-timeline-box:nth-child(even) ._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/
 .-timeline-box:nth-child(odd) ._timeline-event{
  -webkit-border-radius:0 30px 30px 0;
  -moz-border-radius:0 30px 30px 0;
  border-radius:0 30px 30px 0;
 }
 /偶数 even/
 .-timeline-box:nth-child(even) ._timeline-event{
  -webkit-border-radius: 30px 0 0 30px;
  -moz-border-radius: 30px 0 0 30px;
  border-radius: 30px 0 0 30px;
 }
 .-timeline-box:nth-child(odd) ._timeline-time{
  float:left;
  width:344px;
  text-align: right;
 }
 .-timeline-box:nth-child(even) ._timeline-time{
  float:right;
  width:344px;
  text-align: left;
 }
 .-timeline-box:nth-child(even) ._timeline-node{
  float:right;
 }
 .-timeline-box:nth-child(odd) ._timeline-node{
  float:left;
 }
 ._timeline-time{
  font-size:16px;
  color:#d81919;
  font-weight: 600;
  line-height:73px;
 }
 ._timeline-eventbox{
  width: 336px;
  height: 69px;
  border: 4px solid #d94646;
  text-align: center;
 }
 ._timeline-event{
  width:323px;
  height:57px;
  margin:6px;
  color:#fff;
  background:#d94646;
  text-align: center;
  font-size:16px;
  line-height:57px;
 }
 ._timeline-node{
  width:8px;
  height:8px;
  border-radius: 50%;
  background: #fff;
  border:4px solid #b22b2b;
  margin:29px 40px;
 }
 ._longString{
  position:absolute;
  left:50%;
  width:8px;
  height:200px;
  background:#bfbfbf;
  :-57px;
  z-index:10;
  margin-left:-4px;
 }
 ._timtline-box{
  position: relative;
  margin-:100px;
 }
 ._timeline{
  z-index:20;
  position:relative;
 }
 ._title{
  text-align: center;
  margin:0 auto 35px;
 }
 ._title h2{
  font-size:28px;
  color:#d81919;
 }
 ._title p{
  color:#eca7a7;
  margin-:15px;
 }
 </style>
</head>
<body>
<div class="cont">
 <div class="_title">
 <h2>发展历程</h2>
 <p>CONMPANY HISTORY</p>
 </div>
 <div class="_timtline-box">
 <div class="_timeline">
  <div class="-timeline-box clearfix">
  <div class="_timeline-time">2012.12</div>
  <div class="_timeline-node"></div>
  <div class="_timeline-eventbox">
   <div class="_timeline-event">公司成立</div>
  </div>
  </div>
  <div class="-timeline-box clearfix">
  <div class="_timeline-time">2013.02</div>
  <div class="_timeline-node"></div>
  <div class="_timeline-eventbox">
   <div class="_timeline-event">园区业务方向</div>
  </div>
  </div>
  <div class="-timeline-box clearfix">
  <div class="_timeline-time">2014.03</div>
  <div class="_timeline-node"></div>
  <div class="_timeline-eventbox">
   <div class="_timeline-event">获天使轮投资900万元</div>
  </div>
  </div>
  <div class="-timeline-box clearfix">
  <div class="_timeline-time">2013.09</div>
  <div class="_timeline-node"></div>
  <div class="_timeline-eventbox">
   <div class="_timeline-event">业务转型互联网营销</div>
  </div>
  </div>
  <div class="-timeline-box clearfix">
  <div class="_timeline-time">2016.06</div>
  <div class="_timeline-node"></div>
  <div class="_timeline-eventbox">
   <div class="_timeline-event">V1.0版本上线</div>
  </div>
  </div>
  <div class="-timeline-box clearfix">
  <div class="_timeline-time">2017.03</div>
  <div class="_timeline-node"></div>
  <div class="_timeline-eventbox">
   <div class="_timeline-event">期待。。。。</div>
  </div>
  </div>
 </div>
 <div class="_longString"></div>
 </div>
</div>
<script>
$(function(){
 $("._longString").css('height',$(".-timeline-box").size()124+57);
})
</script>
</body>
</html>

说明新增一个时间节点复制class="-timeline-box"的div。

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

上一篇：微信小程序遇到修改数据后页面不渲染的问题解下一篇：jQuery插件HighCharts绘制2D柱状图、折线图和饼图的

js实现时间轴自动排列效果

狼蚁网络搜索

狼蚁网络导航

长沙seo优化

长沙网络营销

长沙网站建设

js实现时间轴自动排列效果

编程语言

狼蚁网络搜索

狼蚁网络导航

长沙seo优化

长沙网络营销

长沙网站建设