首页
所有分类
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 相关文章推荐
javascript 模式设计之工厂模式详细说明
May 10 Javascript
jquery 跨域访问问题解决方法(笔记)
Jun 08 Javascript
基于pthread_create,readlink,getpid等函数的学习与总结
Jul 17 Javascript
js实现连个数字相加而不是拼接的方法
Feb 23 Javascript
教你如何使用firebug调试功能了解javascript闭包和this
Mar 04 Javascript
javascript动态创建链接的方法
May 13 Javascript
js实现点击链接后延迟3秒再跳转的方法
Jun 05 Javascript
js实现短信发送倒计时功能（正则验证）
Feb 10 Javascript
详解vue添加删除元素的方法
Jun 30 Javascript
node 文件上传接口的转发的实现
Sep 23 Javascript
vue.js实现照片放大功能
Jun 23 Javascript
JQuery+drag.js上传图片并且实现图片拖曳
Nov 18 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
数据重复(1) Hudi(1) Flutter(2) tabBar(1) uniapp(4) element-china-area-data(1) sortInts(1) feDisplacementMap(1) Apache(17) Navigator(1)
You might like
英雄试炼之肉山谷—引领RPG新潮流
2020/04/20 DOTA
php学习之 循环结构实现代码
2011/06/09 PHP
一个简单且很好用的php分页类
2013/10/26 PHP
摘自织梦CMS中的图片处理类
2015/08/08 PHP
Symfony学习十分钟入门经典教程
2016/02/03 PHP
PHP7多线程搭建教程
2017/04/21 PHP
JSDoc 介绍使用规范JsDoc的使用介绍
2011/02/12 Javascript
JavaScript代码复用模式实例分析
2012/12/02 Javascript
jquery的相对父元素和相对文档定位示例代码
2013/08/02 Javascript
简单的两种Extjs formpanel加载数据的方式
2013/11/09 Javascript
javascript获取ckeditor编辑器的值(实现代码)
2013/11/18 Javascript
javascript创建createXmlHttpRequest对象示例代码
2014/02/10 Javascript
教你如何使用node.js制作代理服务器
2014/11/26 Javascript
jquery动态添加删除(tr/td)
2015/02/09 Javascript
jquery利用命名空间移除绑定事件的方法
2015/03/11 Javascript
高性能JavaScript DOM编程（1）
2015/08/11 Javascript
原生js获取浏览器窗口及元素宽高常用方法集合
2017/01/18 Javascript
three.js中3D视野的缩放实现代码
2017/11/16 Javascript
Angular4学习之Angular CLI的安装与使用教程
2018/01/04 Javascript
angularjs 页面自适应高度的方法
2018/01/17 Javascript
微信小程序6位或多位验证码密码输入框功能的实现代码
2018/05/29 Javascript
JavaScript简单实现的仿微博留言功能示例
2019/01/17 Javascript
jQuery实现checkbox全选、反选及删除等操作的方法详解
2019/08/02 jQuery
vue页面加载时的进度条功能(实例代码)
2020/01/13 Javascript
javascript实现简易的计算器
2020/01/17 Javascript
Javascript实现鼠标移入方向感知
2020/06/24 Javascript
[35:39]完美世界DOTA2联赛PWL S2 FTD.C vs Rebirth 第二场 11.22
2020/11/24 DOTA
Python使用matplotlib简单绘图示例
2018/02/01 Python
python图形工具turtle绘制国际象棋棋盘
2019/05/23 Python
Python Gluon参数和模块命名操作教程
2019/12/18 Python
keras 多任务多loss实例
2020/06/22 Python
基于Python制作一副扑克牌过程详解
2020/10/19 Python
微信html5页面调用第三方位置导航的示例
2018/03/14 HTML / CSS
德国汽车零件和汽车配件网上商店：kfzteile24
2018/11/14 全球购物
学校党委副书记个人对照检查材料思想汇报
2014/09/28 职场文书
Docker官方工具docker-registry案例演示
2022/04/13 Servers