首页
所有分类
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的gzip静态压缩方法
Jan 05 Javascript
cookie丢失问题(认证失效) Authentication （用户验证信息）也会丢失
Jun 04 Javascript
javascript的offset、client、scroll使用方法详解
Dec 25 Javascript
JS取文本框中最小值的简单实例
Nov 29 Javascript
JavaScript如何实现跨域请求
Aug 05 Javascript
详解JavaScript权威指南之对象
Sep 27 Javascript
基于ajax与msmq技术的消息推送功能实现代码
Dec 26 Javascript
利用JS实现简单的瀑布流加载图片效果
Apr 22 Javascript
ES6正则的扩展实例详解
Apr 25 Javascript
vue 怎么创建组件及组件使用方法
Jul 27 Javascript
微信小程序tabbar底部导航
Nov 05 Javascript
Vue3+elementui plus创建项目的方法
Dec 01 Vue.js
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
XPathParser(1) CAD(1) 403(1) Sentry(1) macos(1) csgo(1) Stater(1) xps(1) 404(1) sout(1)
You might like
DedeCMS dede_channeltype表字段注释
2010/04/07 PHP
PHP创建桌面快捷方式的实例代码
2014/02/17 PHP
php使用NumberFormatter格式化货币的方法
2015/03/21 PHP
php验证码的制作思路和实现方法
2015/11/12 PHP
PHP输入流php://input实例讲解
2015/12/22 PHP
jQuery探测位置的提示弹窗(toolTip box)详细解析
2013/11/14 Javascript
jquery遍历checkbox的注意事项说明
2014/02/21 Javascript
jQuery分组选择器用法实例
2014/12/23 Javascript
js验证框架之RealyEasy验证详解
2016/06/08 Javascript
JS实现添加,替换,删除节点元素的方法
2016/06/30 Javascript
js 判断数据类型的几种方法
2017/01/13 Javascript
jquery拖动改变div大小
2017/07/04 jQuery
微信小程序实现动态改变view标签宽度和高度的方法【附demo源码下载】
2017/12/05 Javascript
vue 全选与反选的实现方法(无Bug 新手看过来)
2018/02/09 Javascript
使用Vue-cli 3.0搭建Vue项目的方法
2018/06/07 Javascript
详解关于vue-area-linkage走过的坑
2018/06/27 Javascript
如何使用proxy实现一个简单完整的MVVM库的示例代码
2019/09/17 Javascript
Vue项目vscode 安装eslint插件的方法(代码自动修复)
2020/04/15 Javascript
vue组件是如何解析及渲染的？
2021/01/13 Vue.js
简单说明Python中的装饰器的用法
2015/04/24 Python
Python Flask-web表单使用详解
2017/11/18 Python
python 读取txt,json和hdf5文件的实例
2018/06/05 Python
python3实现名片管理系统
2020/11/29 Python
python使用PIL实现多张图片垂直合并
2019/01/15 Python
pyqt实现.ui文件批量转换为对应.py文件脚本
2019/06/19 Python
Django配置MySQL数据库的完整步骤
2019/09/07 Python
Python如何在main中调用函数内的函数方式
2020/06/01 Python
如何更换python默认编辑器的背景色
2020/08/10 Python
CSS3媒体查询(Media Queries)介绍
2013/09/12 HTML / CSS
澳大利亚在线消费电子产品商店：TobyDeals
2020/01/05 全球购物
留学推荐信怎么写
2014/01/25 职场文书
中学生社区服务活动报告
2015/02/05 职场文书
小学记事作文之200字
2019/08/06 职场文书
浅析MySQL如何实现事务隔离
2021/06/26 MySQL
vue中div禁止点击事件的实现
2022/04/02 Vue.js
Spring Boot项目如何优雅实现Excel导入与导出功能
2022/06/10 Java/Android