首页
所有分类
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 相关文章推荐
prototype 的说明 js类
Sep 07 Javascript
js 对象是否存在判断
Jul 15 Javascript
extjs 学习笔记（一） 一些基础知识
Oct 13 Javascript
基本jquery的控制tabs打开的数量的代码
Oct 17 Javascript
javascript textContent与innerText的异同分析
Oct 22 Javascript
jquery form 加载数据示例
Apr 21 Javascript
JS常用字符串方法(推荐)
Jan 15 Javascript
Bootstrap模态框案例解析
Mar 05 Javascript
Vue多系统切换实现方案
Jun 05 Javascript
轻松学习JavaScript函数中的 Rest 参数
May 30 Javascript
解决ele ui 表格表头太长问题的实现
Nov 13 Javascript
package.json中homepage属性的作用详解
Mar 11 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
乐信(1) 安健(1) 德劲1102(1) GF515(1) RP2100(1) SHARP(1) A254(1) 上海永华(1) 德劲1107(1) SRF-M100(1)
You might like
php实现ping
2006/10/09 PHP
人大复印资料处理程序_输入篇
2006/10/09 PHP
随时给自己贴的图片加文字的php水印
2007/03/16 PHP
php设计模式  Command(命令模式)
2011/06/17 PHP
PHP 第二节 数据类型之转换
2012/04/28 PHP
解决cPanel无法安装php5.2.17
2014/06/22 PHP
thinkphp框架实现数据添加和显示功能
2016/06/29 PHP
JS 字符串连接[性能比较]
2009/05/10 Javascript
js对数字的格式化使用说明
2011/01/12 Javascript
非常有用的40款jQuery 插件推荐（系列二）
2011/12/25 Javascript
通过复制Table生成word和excel的javascript代码
2014/01/20 Javascript
director.js实现前端路由使用实例
2015/02/03 Javascript
使用pjax实现无刷新更改页面url
2015/02/05 Javascript
使用AngularJS和PHP的Laravel实现单页评论的方法
2015/06/19 Javascript
javascript比较两个日期相差天数的方法
2015/07/23 Javascript
JavaScript黑洞数字之运算路线查找算法(递归算法)实例
2016/01/28 Javascript
JS实现title标题栏文字不间断滚动显示效果
2016/09/07 Javascript
js简单正则验证汉字英文及下划线的方法
2016/11/28 Javascript
vue观察模式浅析
2018/09/25 Javascript
微信小程序实现无限滚动列表
2020/05/29 Javascript
在JavaScript中使用严格模式(Strict Mode)
2019/06/13 Javascript
vue项目中在可编辑div光标位置插入内容的实现代码
2020/01/07 Javascript
vue-router 控制路由权限的实现
2020/09/24 Javascript
Python文档生成工具pydoc使用介绍
2015/06/02 Python
python3实现字符串的全排列的方法(无重复字符)
2018/07/07 Python
python re.match()用法相关示例
2021/01/27 Python
Electric官网：美国高级眼镜和配件品牌
2020/06/04 全球购物
Chupi官网：在爱尔兰手工制作的订婚、结婚戒指和精美珠宝
2020/09/28 全球购物
请解释在new与override的区别
2012/10/29 面试题
中学门卫岗位职责
2013/12/26 职场文书
2014小学二年级班主任工作总结
2014/12/05 职场文书
工人先锋号事迹材料
2014/12/24 职场文书
行政上诉状范文
2015/05/23 职场文书
公开致歉信
2019/06/24 职场文书
Jpa Specification如何实现and和or同时使用查询
2021/11/23 Java/Android
Java 超详细讲解ThreadLocal类的使用
2022/04/07 Java/Android