首页
所有分类
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 function代码
May 23 Javascript
jquery控制select的text/value值为选中状态
Jun 03 Javascript
IE9+已经不对document.createElement向下兼容的解决方法
Sep 14 Javascript
JavaScript多并发问题如何处理
Oct 28 Javascript
JavaScript中Function函数与Object对象的关系
Dec 17 Javascript
基于JavaScript实现前端文件的断点续传
Oct 17 Javascript
JavaScript 有用的代码片段和 trick
Feb 22 Javascript
Angular2中监听数据更新的方法
Aug 31 Javascript
浅谈vue项目用到的mock数据接口的两种方式
Oct 09 Javascript
node.js实现简单的压缩/解压缩功能示例
Nov 05 Javascript
Vue环境搭建+VSCode+Win10的详细教程
Aug 19 Javascript
vue项目查看vue版本及cli版本的实现方式
Oct 24 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
NFS(1) ftpserver(1) tfx(1) Odoo(1) SeaTunnel(1) BeautifulSoup4(2) OpenAI baselines(1) tkFileDialog(1) ElementTree(1) 面向接口(1)
You might like
星际争霸中的热键
2020/03/04 星际争霸
PHP4实际应用经验篇(3)
2006/10/09 PHP
分享10段PHP常用代码
2015/11/11 PHP
php使用file函数、fseek函数读取大文件效率对比分析
2016/11/04 PHP
extjs DataReader、JsonReader、XmlReader的构造方法
2009/11/07 Javascript
JavaScript 学习笔记之基础中的基础
2015/01/13 Javascript
基于BootStrap Metronic开发框架经验小结【二】列表分页处理和插件JSTree的使用
2016/05/12 Javascript
浅谈使用splice函数对数组中的元素进行删除时的注意事项
2016/12/04 Javascript
微信小程序 五星评分(包括半颗星评分)实例代码
2016/12/14 Javascript
mongoose设置unique不生效问题的解决及如何移除unique的限制
2017/11/07 Javascript
基于vue监听滚动事件实现锚点链接平滑滚动的方法
2018/01/17 Javascript
浅谈在react中如何实现扫码枪输入
2018/07/04 Javascript
详解vuex中action何时完成以及如何正确调用dispatch的思考
2019/01/21 Javascript
layui table数据修改的回显方法
2019/09/04 Javascript
js实现视图和数据双向绑定的方法分析
2020/02/05 Javascript
JavaScript判断数据类型有几种方法及区别介绍
2020/09/02 Javascript
js实现电灯开关效果
2021/01/19 Javascript
使用beaker让Facebook的Bottle框架支持session功能
2015/04/23 Python
Python遍历目录并批量更换文件名和目录名的方法
2016/09/19 Python
Python实现对字符串的加密解密方法示例
2017/04/29 Python
深入浅析python with语句简介
2018/04/11 Python
NumPy 数学函数及代数运算的实现代码
2018/07/18 Python
python抓取京东小米8手机配置信息
2018/11/13 Python
Python匿名函数及应用示例
2019/04/09 Python
Python学习笔记之错误和异常及访问错误消息详解
2019/08/08 Python
Python 处理文件的几种方式
2019/08/23 Python
Jeep牧马人、切诺基和自由人零配件：4 Wheel Drive Hardware
2017/07/02 全球购物
中学生英语演讲稿
2014/04/26 职场文书
羽毛球比赛策划方案
2014/06/13 职场文书
领导干部民主生活会自我剖析材料范文
2014/09/20 职场文书
干部职工纪律作风整改措施思想汇报
2014/10/11 职场文书
乡镇防汛工作汇报
2014/10/28 职场文书
撤诉书怎么写
2015/05/19 职场文书
导游词之西安大清真寺
2019/12/17 职场文书
eclipse创建项目没有dynamic web的解决方法
2021/06/24 Java/Android
阿里云ECS云服务器快照的概念以及如何使用
2022/04/21 Servers