首页
所有分类
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中判断函数是new还是()调用的区别说明
Apr 07 Javascript
jquery实现微博文字输入框 输入时显示输入字数 效果实现
Jul 12 Javascript
js 表单提交后按钮变灰的实例代码
Aug 16 Javascript
jQuery窗口、文档、网页各种高度的精确理解
Jul 02 Javascript
浅谈JavaScript字符串与数组
Jun 03 Javascript
浅谈javascript 函数表达式和函数声明的区别
Jan 05 Javascript
利用vscode编写vue的简单配置详解
Jun 17 Javascript
AngularJS中下拉框的高级用法示例
Oct 11 Javascript
p5.js 毕达哥拉斯树的实现代码
Mar 23 Javascript
微信小程序发送短信验证码完整实例
Jan 07 Javascript
Vue 动态添加路由及生成菜单的方法示例
Jun 20 Javascript
Nuxt 项目性能优化调研分析
Nov 07 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
Debian(1) win7(2) RustDesk(1) 鸿蒙3.0(1) Sunmao(1) 输入法(2) 蓝屏(1) 滚动条(1) 声卡驱动(1) 鸿蒙(2)
You might like
索尼SONY ICF-SW7600GR电路分析与改良
2021/03/02 无线电
PHP 八种基本的数据类型小结
2011/06/01 PHP
php自定义session示例分享
2014/04/22 PHP
PHP常见漏洞攻击分析
2016/02/21 PHP
SAE实时日志接口SDK用法示例
2016/10/09 PHP
innerText和textContent对比及使用介绍
2013/02/27 Javascript
jquery动态添加删除div 具体实现
2013/07/20 Javascript
根据表格中的某一列进行排序的javascript代码
2013/11/29 Javascript
jquery 快速回到页首的方法
2013/12/05 Javascript
影响jQuery使用的14个方面
2014/09/01 Javascript
深入浅析Extjs中store分组功能的使用方法
2016/04/20 Javascript
javascript实现下雪效果【实例代码】
2016/05/03 Javascript
JS仿hao123导航页面图片轮播效果
2016/09/01 Javascript
详解react内联样式使用webpack将px转rem
2018/09/13 Javascript
jQuery实现的别踩白块小游戏完整示例
2019/01/07 jQuery
JS遍历树层级关系实现原理解析
2020/08/31 Javascript
Python中的闭包实例详解
2014/08/29 Python
Python函数式编程指南（二）：从函数开始
2015/06/24 Python
Python scikit-learn 做线性回归的示例代码
2017/11/01 Python
python实现淘宝秒杀脚本
2020/06/23 Python
python 命令行传入参数实现解析
2019/08/30 Python
tensorflow之变量初始化(tf.Variable)使用详解
2020/02/06 Python
解决python调用自己文件函数/执行函数找不到包问题
2020/06/01 Python
Python调用JavaScript代码的方法
2020/10/27 Python
Anthropologie英国：美国家喻户晓的休闲服装和家居产品品牌
2018/12/05 全球购物
CheapTickets香港机票预订网站：CheapTickets.hk
2019/06/26 全球购物
Java面试题汇总
2015/12/06 面试题
岗位职责的构建方法
2014/02/01 职场文书
大家访活动实施方案
2014/03/10 职场文书
夏季药店促销方案
2014/08/22 职场文书
模范教师事迹材料
2014/12/16 职场文书
一年级小学生评语大全
2014/12/25 职场文书
《为人民服务》教学反思
2016/02/20 职场文书
详解Redis主从复制实践
2021/05/19 Redis
解决tk mapper 通用mapper的bug问题
2021/06/16 Java/Android
Python并发编程实例教程之线程的玩法
2021/06/20 Python