首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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

Posted in Javascript onMarch 09, 2017

效果图：

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。

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持三水点靠木！

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

- Author -

994399414

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
学习ExtJS TextField常用方法
Oct 07 Javascript
javascript中不等于的代码是什么怎么写
Dec 29 Javascript
JavaScript实现16进制颜色值转RGB的方法
Feb 09 Javascript
javascript self对象使用详解
Oct 18 Javascript
VueJs路由跳转——vue-router的使用详解
Jan 10 Javascript
bootstrap下拉菜单使用方法解析
Jan 13 Javascript
使用原生js封装的ajax实例(兼容jsonp)
Oct 12 Javascript
详解RequireJs官方使用教程
Oct 31 Javascript
微信小程序加载机制及运行机制图解
Nov 27 Javascript
javascript实现贪吃蛇经典游戏
Apr 10 Javascript
vue backtop组件的实现完整代码
Apr 07 Vue.js
element tree树形组件回显数据问题解决
Aug 14 Javascript
jQuery插件HighCharts绘制2D柱状图、折线图和饼图的组合图效果示例【附demo源码下载】
Mar 09 #Javascript
100行代码理解和分析vue2.0响应式架构
Mar 09 #Javascript
js实现悬浮窗效果(支持拖动)
Mar 09 #Javascript
详解vuelidate 对于vueJs2.0的验证解决方案
Mar 09 #Javascript
Bootstrap禁用响应式布局的实现方法
Mar 09 #Javascript
微信小程序 template模板详解及实例代码
Mar 09 #Javascript
jQuery插件HighCharts绘制2D柱状图、折线图的组合双轴图效果示例【附demo源码下载】
Mar 09 #Javascript
访问日志(2) 缓存(3) ipv6(1) 事务(5) 连接数(1) PV(1) 弱口令(1) 线程(1) 策略(1) 内存(1)
You might like
深入理解PHP原理之执行周期分析
2016/06/01 PHP
Laravel 创建指定表 migrate的例子
2019/10/09 PHP
javascript 事件处理、鼠标拖动效果实现方法详解
2012/05/11 Javascript
js实现缓冲运动效果的方法
2015/04/10 Javascript
浅谈Sticky组件的改进实现
2016/03/22 Javascript
JS中常用的正则表达式
2016/09/29 Javascript
hovertree插件实现二级树形菜单（简单实用）
2016/12/28 Javascript
javascript闭包功能与用法实例分析
2017/04/06 Javascript
对angularJs中2种自定义服务的实例讲解
2018/09/30 Javascript
详解Axios 如何取消已发送的请求
2018/10/20 Javascript
vue 左滑删除功能的示例代码
2019/01/28 Javascript
通过实例讲解JS如何防抖动
2019/06/15 Javascript
vue proxy 的优势与使用场景实现
2020/06/15 Javascript
js实现盒子滚动动画效果
2020/08/09 Javascript
python使用reportlab画图示例（含中文汉字）
2013/12/03 Python
详解python开发环境搭建
2016/12/16 Python
Django MEDIA的配置及用法详解
2019/07/25 Python
django 数据库连接模块解析及简单长连接改造方法
2019/08/29 Python
python中enumerate() 与zip()函数的使用比较实例分析
2019/09/03 Python
使用pth文件添加Python环境变量方式
2020/05/26 Python
详解anaconda安装步骤
2020/11/23 Python
详解CSS3 用border写 空心三角箭头 (两种写法)
2017/09/29 HTML / CSS
用HTML5制作一个简单的弹力球游戏
2015/05/12 HTML / CSS
ORACLE十问
2015/04/20 面试题
进程的查看和调度分别使用什么命令
2015/03/25 面试题
大学生求职信范文应怎么写
2014/01/01 职场文书
应届专科生个人的自我评价
2014/01/05 职场文书
开业庆典策划方案
2014/02/18 职场文书
公司授权委托书
2014/04/04 职场文书
祖国在我心中演讲稿450字
2014/09/05 职场文书
私营公司诉讼代理委托书范本
2014/09/13 职场文书
学校师德师风整改方案
2014/10/28 职场文书
交通事故起诉书
2015/05/19 职场文书
教师学习中国梦心得体会
2016/01/05 职场文书
高中议论文（范文2篇）
2019/08/19 职场文书
Python使用pyecharts控件绘制图表
2022/06/05 Python