首页
所有分类
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 相关文章推荐
Firefox div高度自适应
Apr 28 Javascript
javascript 语法基础 想学习js的朋友可以看看
Dec 16 Javascript
JavaScript Event学习第六章 事件的访问
Feb 07 Javascript
formValidator3.3的ajaxValidator一些异常分析
Jul 12 Javascript
中文字符串截取的js函数代码
Apr 17 Javascript
Javascript中的delete操作符详细介绍
Jun 06 Javascript
JavaScript中数组的22种方法必学(推荐)
Jul 20 Javascript
jQuery实现的自适应焦点图效果完整实例
Aug 24 Javascript
JavaScript比较两个数组的内容是否相同(推荐)
May 02 Javascript
详解angularjs利用ui-route异步加载组件
May 21 Javascript
Vue $mount实战之实现消息弹窗组件
Apr 22 Javascript
JavaScript选择器函数querySelector和querySelectorAll
Nov 27 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
pytz(1) harbor(1) GoFrame(3) dockerfile(1) 短信验证码(1) 分布式锁(3) reduce(2) filter(1) SQLite3(1) commit(1)
You might like
syphon 虹吸式咖啡冲泡冲煮倒水的得与失
2021/03/03 冲泡冲煮
ThinkPHP中自定义错误页面和提示页面实例
2014/11/22 PHP
php判断两个日期之间相差多少个月份的方法
2015/06/18 PHP
php中array_unshift()修改数组key注意事项分析
2016/05/16 PHP
Laravel实现autoload方法详解
2017/05/07 PHP
在PHP 7下安装Swoole与Yar,Yaf的方法教程
2017/06/02 PHP
php 猴子摘桃的算法
2017/06/20 PHP
laravel添加前台跳转成功页面示例
2019/10/22 PHP
jquery图片不完全按比例自动缩小的简单代码
2013/07/29 Javascript
JSONP之我见
2015/03/24 Javascript
基于jQuery和CSS3制作响应式水平时间轴附源码下载
2015/12/20 Javascript
纯js代码制作的网页时钟特效【附实例】
2016/03/30 Javascript
浅谈JS中逗号运算符的用法
2016/06/12 Javascript
微信小程序 详解Page中data数据操作和函数调用
2017/01/12 Javascript
js canvas画布实现高斯模糊效果
2018/11/27 Javascript
详解Vue一个案例引发「内容分发slot」的最全总结
2018/12/02 Javascript
js作用域和作用域链及预解析
2019/04/11 Javascript
解决jquery validate 验证不通过后验证正确的信息仍残留在label上的方法
2019/08/27 jQuery
vue 路由懒加载中给 Webpack Chunks 命名的方法
2020/04/24 Javascript
centos 安装python3.6环境并配置虚拟环境的详细教程
2018/02/22 Python
Python实现的连接mssql数据库操作示例
2018/08/17 Python
Python语言检测模块langid和langdetect的使用实例
2019/02/19 Python
python的set处理二维数组转一维数组的方法示例
2019/05/31 Python
Python中顺序表原理与实现方法详解
2019/12/03 Python
Macbook安装Python最新版本、GUI开发环境、图像处理、视频处理环境详解
2020/02/17 Python
django 解决model中类写不到数据库中,数据库无此字段的问题
2020/05/20 Python
Python中BeautifulSoup通过查找Id获取元素信息
2020/12/07 Python
带有css3动画效果的兼容多浏览器简单导航条示例
2014/01/26 HTML / CSS
纯CSS改变webkit内核浏览器的滚动条样式
2014/04/17 HTML / CSS
详解HTML5中的manifest缓存使用
2015/09/09 HTML / CSS
毕业生自我鉴定范文
2013/11/08 职场文书
志愿者活动总结范文
2014/04/26 职场文书
工商管理专业毕业生求职信
2014/05/26 职场文书
高中家长意见怎么写
2015/06/03 职场文书
小学一年级数学教学反思
2016/02/16 职场文书
python使用BeautifulSoup 解析HTML
2022/04/24 Python