js实现时间轴自动排列效果
程序员文章站
2022-05-24 19:25:18
效果图：
代码如下：
效果图：
代码如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>timeline</title>
<script src="http://7xnlea.com2.z0.glb.qiniucdn.com/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 class="cont">
<div class="biz_title">
<h2>发展历程</h2>
<p>conmpany history</p>
</div>
<div class="biz_timtline-box">
<div class="biz_timeline">
<div class="biz-timeline-box clearfix">
<div class="biz_timeline-time">2012.12</div>
<div class="biz_timeline-node"></div>
<div class="biz_timeline-eventbox">
<div class="biz_timeline-event">公司成立</div>
</div>
</div>
<div class="biz-timeline-box clearfix">
<div class="biz_timeline-time">2013.02</div>
<div class="biz_timeline-node"></div>
<div class="biz_timeline-eventbox">
<div class="biz_timeline-event">园区业务方向</div>
</div>
</div>
<div class="biz-timeline-box clearfix">
<div class="biz_timeline-time">2014.03</div>
<div class="biz_timeline-node"></div>
<div class="biz_timeline-eventbox">
<div class="biz_timeline-event">获天使轮投资900万元</div>
</div>
</div>
<div class="biz-timeline-box clearfix">
<div class="biz_timeline-time">2013.09</div>
<div class="biz_timeline-node"></div>
<div class="biz_timeline-eventbox">
<div class="biz_timeline-event">业务转型互联网营销</div>
</div>
</div>
<div class="biz-timeline-box clearfix">
<div class="biz_timeline-time">2016.06</div>
<div class="biz_timeline-node"></div>
<div class="biz_timeline-eventbox">
<div class="biz_timeline-event">v1.0版本上线</div>
</div>
</div>
<div class="biz-timeline-box clearfix">
<div class="biz_timeline-time">2017.03</div>
<div class="biz_timeline-node"></div>
<div class="biz_timeline-eventbox">
<div class="biz_timeline-event">期待。。。。</div>
</div>
</div>
</div>
<div class="biz_longstring"></div>
</div>
</div>
<script>
$(function(){
$(".biz_longstring").css('height',$(".biz-timeline-box").size()*124+57);
})
</script>
</body>
</html>
说明：新增一个时间节点：复制class="biz-timeline-box"的div。
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持！
上一篇： 打起鼓诶敲起锣，推着小车我来送货！