js实现时间轴自动排列效果
2017-03-09 10:55
399 查看
效果图:
代码如下:
<!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。
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持脚本之家!
您可能感兴趣的文章:
相关文章推荐
- js实现GridView单选效果自动设置交替行、选中行、鼠标移动行背景色
- JS图片自动轮换效果实现思路附截图
- JS实现自动变换的菜单效果代码
- JS+CSS实现自动切换的网页滑动门菜单效果代码
- JS实现自动变换的菜单效果代码
- js实现相对定位div块移动_自动排列
- js实现简单选项卡与自动切换效果的方法
- JS实现自动变化的导航菜单效果代码
- js实现Select列表内容自动滚动效果代码
- JS特效实现图片自动播放并可控的效果
- 一个js实现的字体自动打印的效果
- JS+CSS实现自动改变切换方向图片幻灯切换效果的方法
- JS图片自动轮换效果实现思路附截图
- JS实现自动切换文字的导航效果代码
- javaBean+JSP+JS+XML实现从发布文章中自动提取图片在首页轮换效果
- 折腾了一早上的C# WPF ListView+Grid 实现图片+文字 自动换行排列 类似Windows资源管理器效果
- js实现填写身份证号、手机号、准考证号等信息自动空格的效果
- JS+CSS实现自动改变切换方向图片幻灯切换效果的方法
- JS实现自动固定顶部的悬浮菜单栏效果
- JS实现自动变化的导航菜单效果代码