首页
所有分类
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 相关文章推荐
一段实时更新的时间代码
Jul 07 Javascript
用按钮控制iframe显示的网页实现方法
Feb 04 Javascript
IE关闭时判断及AJAX注销案例学习
Feb 18 Javascript
七个很有意思的PHP函数
May 12 Javascript
Node.js实现简单聊天服务器
Jun 20 Javascript
jQuery实现鼠标滚轮动态改变样式或效果
Jan 05 Javascript
用canvas 实现个图片三角化（LOW POLY）效果
Feb 18 Javascript
easyui form validate总是返回false的原因及解决方法
Nov 07 Javascript
jQuery的ajax中使用FormData实现页面无刷新上传功能
Jan 16 Javascript
微信小程序使用video组件播放视频功能示例【附源码下载】
Dec 08 Javascript
详解Angular6 热加载配置方案
Aug 18 Javascript
JQuery插件tablesorter表格排序实现过程解析
May 28 jQuery
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
opencv(7) iOS(1) 模型保存加载(1) Pyecharts(7) moviepy(1) PyTorch(1) compose(3) 模糊匹配(1) Athens(1) FuzzyWuzzy(1)
You might like
yii分页组件用法实例分析
2015/12/28 PHP
PHP连接sftp并下载文件的方法教程
2018/08/26 PHP
用javascript动态调整iframe高度的代码
2007/04/10 Javascript
JavaScript DOM 学习第九章 选取范围的介绍
2010/02/19 Javascript
JQuery实现简单时尚快捷的气泡提示插件
2012/12/20 Javascript
jquery 获取表单元素里面的值示例代码
2013/07/28 Javascript
jQuery实现鼠标滑过点击事件音效试听
2015/08/31 Javascript
基于jquery实现的仿优酷图片轮播特效代码
2016/01/13 Javascript
BootStrap实现树形目录组件代码详解
2016/06/21 Javascript
vue插件tab选项卡使用小结
2016/10/27 Javascript
js仿新浪微博消息发布功能
2017/02/17 Javascript
Ionic3 UI组件之autocomplete详解
2017/06/08 Javascript
详解webpack 入门与解析
2018/04/09 Javascript
vue之封装多个组件调用同一接口的案例
2020/08/11 Javascript
vue 项目中当访问路由不存在的时候默认访问404页面操作
2020/08/31 Javascript
[09:13]2014DOTA2国际邀请赛 中国区预选赛coser表演
2014/05/23 DOTA
使用Python脚本在Linux下实现部分Bash Shell的教程
2015/04/17 Python
用Python写一个无界面的2048小游戏
2016/05/24 Python
Pycharm学习教程（1） 定制外观
2017/05/02 Python
python-str,list,set间的转换实例
2018/06/27 Python
Python类的继承用法示例
2019/01/31 Python
python selenium firefox使用详解
2019/02/26 Python
深入解析Python小白学习【操作列表】
2019/03/23 Python
对Python生成器、装饰器、递归的使用详解
2019/07/19 Python
如何在mac环境中用python处理protobuf
2019/12/25 Python
django日志默认打印request请求信息的方法示例
2020/05/17 Python
python使用多线程查询数据库的实现示例
2020/08/17 Python
使用 css3 transform 属性来变换背景图的方法
2019/05/07 HTML / CSS
乌克兰移动电子产品和相关配件的在线商店：iTMag
2020/03/16 全球购物
成功的酒店创业计划书
2013/12/27 职场文书
简历的个人自我评价范文
2014/01/03 职场文书
《都江堰》教学反思
2014/02/07 职场文书
2014年平安创建工作总结
2014/11/24 职场文书
2015年基层党组织公开承诺书
2015/01/21 职场文书
工作自我评价范文
2019/03/21 职场文书
python基础详解之if循环语句
2021/04/24 Python