首页
所有分类
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 相关文章推荐
一个对于Array的简单扩展
Oct 03 Javascript
Javascript玩转继承（二）
May 08 Javascript
js实现跟随鼠标移动且带关闭功能的图片广告实例
Feb 26 Javascript
详解ECMAScript6入门--Class对象
Apr 27 Javascript
AngularJS 支付倒计时功能实现思路
Jun 05 Javascript
Javascript别踩白块儿（钢琴块儿）小游戏实现代码
Jul 20 Javascript
three.js中文文档学习之创建场景
Nov 20 Javascript
jQuery+ajax读取json数据并按照价格排序示例
Mar 28 jQuery
layui 表单标签的校验方法
Sep 04 Javascript
Vue 自定义标签的src属性不能使用相对路径的解决
Sep 17 Javascript
node 文件上传接口的转发的实现
Sep 23 Javascript
JavaScript如何操作css
Oct 24 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) 模拟登录(1) NumPy(2) 双向链表(6) 扫雷(1) Scheduled(1) router(1) 路由(1) Date(1) 单向链表(1)
You might like
如何使用PHP计算上一个月的今天
2013/05/23 PHP
PHP实现获取中英文首字母
2015/06/19 PHP
Json_encode防止汉字转义成unicode的方法
2016/02/25 PHP
PHP MYSQL简易交互式站点开发
2016/12/27 PHP
漂亮的提示信息（带箭头）
2007/03/21 Javascript
理解Javascript_02_理解undefined和null
2010/10/11 Javascript
JS焦点图切换，上下翻转
2011/05/12 Javascript
JQuery获取浏览器窗口内容部分高度的代码
2012/02/24 Javascript
IE6浏览器下resize事件被执行了多次解决方法
2012/12/11 Javascript
jQuery.extend()的实现方式详解及实例
2013/06/29 Javascript
基于JQuery实现的Select级联
2014/01/27 Javascript
JavaScript实现数字数组按照倒序排列的方法
2015/04/06 Javascript
纯javascript实现的小游戏《Flappy Pig》实例
2015/07/27 Javascript
JS html时钟制作代码分享
2017/03/03 Javascript
vue+Element-ui实现分页效果实例代码详解
2018/12/10 Javascript
基于elementUI实现图片预览组件的示例代码
2019/03/31 Javascript
vue使用一些外部插件及样式的配置代码
2019/11/18 Javascript
JavaScript实现飞舞的泡泡效果
2020/02/07 Javascript
9个JavaScript日常开发小技巧
2020/10/06 Javascript
Python Web服务器Tornado使用小结
2014/05/06 Python
python中Switch/Case实现的示例代码
2017/11/09 Python
详解python中asyncio模块
2018/03/03 Python
浅析Python 中几种字符串格式化方法及其比较
2019/07/02 Python
Python中低维数组填充高维数组的实现
2019/12/02 Python
django models里数据表插入数据id自增操作
2020/07/15 Python
python实现excel公式格式化的示例代码
2020/12/23 Python
重新定义牛仔布，100美元以下：Warp + Weft
2018/07/25 全球购物
美国最佳在线航班预订网站：LookupFare
2019/03/26 全球购物
荷兰最大的鞋子、服装和运动折扣店：Bristol
2021/01/07 全球购物
PHP如何对用户密码进行加密
2014/07/31 面试题
小松树教学反思
2014/02/11 职场文书
酒店管理毕业生自荐信
2014/05/25 职场文书
运动会闭幕词
2015/01/28 职场文书
仓库保管员岗位职责
2015/02/09 职场文书
python绘图subplots函数使用模板的示例代码
2021/04/30 Python
工厂无线对讲系统解决方案
2022/02/18 无线电