首页
所有分类
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 学习之旅 （3）
Feb 05 Javascript
基于jquery1.4.2的仿flash超炫焦点图播放效果
Apr 20 Javascript
jquery跟js初始化加载的多种方法及区别介绍
Apr 02 Javascript
函数式 JavaScript（一）简介
Jul 07 Javascript
JQuery表格拖动调整列宽效果(自己动手写的)
Sep 01 Javascript
BootStrap的alert提示框的关闭后再显示怎么解决
May 17 Javascript
jQuery EasyUI学习教程之datagrid点击列表头排序
Jul 09 Javascript
详解Js模板引擎（TrimPath）
Nov 22 Javascript
详解vue2.0 transition 多个元素嵌套使用过渡
Jun 19 Javascript
Vue中建立全局引用或者全局命令的方法
Aug 21 Javascript
vue动态绑定组件子父组件多表单验证功能的实现代码
May 14 Javascript
js实现随机点名功能
Dec 23 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) 森海(1) YB235(1) YB217(1) PL-365(1) 再生机(1) 1 Tube Radio(1) MX500(1) YB400(2)
You might like
Flash空降上海 化身大魔王接受挑战
2020/03/02 星际争霸
PHP命名空间namespace的定义方法详解
2017/03/29 PHP
javascript css float属性的特殊写法
2008/11/13 Javascript
javascript 文章截取部分无损html显示实现代码
2010/05/04 Javascript
javascript中方便增删改cookie的一个类
2012/10/11 Javascript
js中方法重载如何实现？以及函数的参数问题
2013/08/01 Javascript
关于页面嵌入swf覆盖div层的问题的解决方法
2014/02/11 Javascript
node.js中的fs.fchmod方法使用说明
2014/12/16 Javascript
轻松实现Bootstrap图片轮播
2020/04/20 Javascript
基于rem的移动端响应式适配方案(详解)
2017/07/07 Javascript
微信小程序 配置顶部导航条标题颜色的实现方法
2017/09/20 Javascript
jQuery niceScroll滚动条错位问题的解决方法
2018/02/03 jQuery
vue项目实现表单登录页保存账号和密码到cookie功能
2018/08/31 Javascript
JS实现表单中点击小眼睛显示隐藏密码框中的密码
2020/04/13 Javascript
使用JS实现鼠标放上图片进行放大离开实现缩小功能
2021/01/27 Javascript
[39:18]完美世界DOTA2联赛PWL S3 Forest vs LBZS 第二场 12.17
2020/12/19 DOTA
Python读取txt文件数据的方法(用于接口自动化参数化数据)
2018/06/27 Python
Python利用lxml模块爬取豆瓣读书排行榜的方法与分析
2019/04/15 Python
详解pandas中iloc, loc和ix的区别和联系
2020/03/09 Python
解决Python发送Http请求时,中文乱码的问题
2020/04/30 Python
H5仿微信界面教程(一)
2017/07/05 HTML / CSS
德国珠宝和手表在线商店：VALMANO
2019/03/24 全球购物
英国最大的在线亚洲杂货店：Red Rickshaw
2020/03/22 全球购物
委托书样本
2014/04/02 职场文书
《山谷中的谜底》教学反思
2014/04/26 职场文书
语文高效课堂实施方案
2014/05/03 职场文书
活动倡议书范文
2014/05/13 职场文书
公证委托书
2014/08/01 职场文书
2014学校领导四风问题对照检查材料思想汇报
2014/09/22 职场文书
2015年秋季新学期寄语
2015/03/25 职场文书
个人承诺书格式范文
2015/04/29 职场文书
党小组鉴定意见
2015/06/02 职场文书
独生子女证明范本
2015/06/19 职场文书
城镇居民医疗保险工作总结
2015/08/10 职场文书
python urllib库的使用详解
2021/04/13 Python
Python中np.random.randint()参数详解及用法实例
2022/09/23 Python