这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
本文主要介绍了 js 实现新增加事件:时间轴自动排列效果的实例,具有很好的参考价值。下面跟着小编一起来看下吧
效果图:
代码如下:
- <!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。
来源: http://www.phperz.com/article/17/0703/326844.html