最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
js实现时间轴自动排列效果
时间:2017-06-13 编辑:简简单单 来源:一聚教程网
效果图:
代码如下:
代码如下 | 复制代码 |
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; }
发展历程
CONMPANY HISTORY
$(function(){ $(".biz_longString").css('height',$(".biz-timeline-box").size()*124+57); }) |