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。

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
跨浏览器开发经验总结(四) 怎么写入剪贴板
May 13 Javascript
IE6/IE7中JavaScript json提示缺少标识符、字符串或数字问题处理
Dec 16 Javascript
jQuery显示和隐藏 常用的状态判断方法
Jan 29 Javascript
基于JavaScript实现添加到购物车效果附源码下载
Aug 22 Javascript
利用JQuery直接调用asp.net后台的简单方法
Oct 27 Javascript
详解Angular 4.x NgTemplateOutlet
May 24 Javascript
Angularjs使用过滤器完成排序功能
Sep 20 Javascript
js捆绑TypeScript声明文件的方法教程
Apr 13 Javascript
原生JS实现旋转轮播图+文字内容切换效果【附源码】
Sep 29 Javascript
Vuex的初探与实战小结
Nov 26 Javascript
vue移动端城市三级联动组件使用详解
Jul 26 Javascript
vue跳转页面的几种方法(推荐)
Mar 26 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
You might like
在Windows XP下安装Apache+MySQL+PHP环境
2015/02/22 PHP
php中执行系统命令的方法
2015/03/21 PHP
Yii2框架RESTful API 格式化响应,授权认证和速率限制三部分详解
2016/11/10 PHP
php封装json通信接口详解及实例
2017/03/07 PHP
详解如何实现Laravel的服务容器的方法示例
2019/04/15 PHP
一个原生的用户等级的进度条
2010/07/03 Javascript
IE6下出现JavaScript未结束的字符串常量错误的解决方法
2010/11/21 Javascript
js获取height和width的方法说明
2013/01/06 Javascript
javascript使用location.search的示例
2013/11/05 Javascript
JavaScript改变HTML元素的样式改变CSS及元素属性
2013/11/12 Javascript
jquery Ajax 实现加载数据前动画效果的示例代码
2014/02/07 Javascript
jquery css 设置table的奇偶行背景色示例
2014/06/03 Javascript
NodeJS学习笔记之FS文件模块
2015/01/13 NodeJs
jquery采用oop模式class类的使用示例
2016/01/22 Javascript
jquery单击事件和双击事件冲突解决方案
2016/03/02 Javascript
jQuery基本选择器(实例及表单域value的获取方法)
2016/05/20 Javascript
JavaScript数值千分位格式化的两种简单实现方法
2016/08/01 Javascript
关于动态生成dom绑定事件失效的原因及解决方法
2016/08/06 Javascript
jQuery实现简单的网页换肤效果示例
2016/09/18 Javascript
详解React-Todos入门例子
2016/11/08 Javascript
PHP自动加载autoload和命名空间的应用小结
2017/12/01 Javascript
基于vue开发的在线付费课程应用过程
2018/01/25 Javascript
vue-cli webpack 引入swiper的操作方法
2018/09/15 Javascript
BootStrap table实现表格行拖拽效果
2018/12/01 Javascript
微信小程序遍历Echarts图表实现多个饼图
2019/04/25 Javascript
Vue项目配置跨域访问和代理proxy设置方式
2020/09/08 Javascript
如何编写一个 Webpack Loader的实现
2020/10/18 Javascript
[01:03]PWL开团时刻DAY6——别打我
2020/11/05 DOTA
python+os根据文件名自动生成文本
2019/03/21 Python
python+mysql实现个人论文管理系统
2019/10/25 Python
Scrapy框架介绍之Puppeteer渲染的使用
2020/06/19 Python
Html5元素及基本语法详解
2016/08/02 HTML / CSS
瑞典的玛丽小姐:Miss Mary of Sweden
2019/02/13 全球购物
介绍一下#error预处理
2015/09/25 面试题
2015年妇幼卫生工作总结
2015/05/23 职场文书
致运动员加油稿
2015/07/21 职场文书