当前位置:首页 > 编程教程 > javascript技术文章 > js实现时间轴自动排列效果

js实现时间轴自动排列的代码分享

  • 发布时间:
  • 作者:码农之家
  • 点击:126

这篇文章主要知识点是关于js、时间轴、的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下电子书

同构JavaScript应用开发
  • 类型:JavaScript大小:10.4 MB格式:PDF作者:杰森·史特林贝尔(Jason Strim
立即下载

js实现时间轴自动排列效果

效果图:

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。

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

以上就是本次给大家分享的关于java的全部知识点内容总结,大家还可以在下方相关文章里找到相关文章进一步学习,感谢大家的阅读和支持。

您可能感兴趣的文章:

  • 小结WdatePicker.js时间日期插件的用法
  • JS中setTimeout时间设置为0操作方法
  • 轻量级的js时间库miment使用实例
  • js设置默认时间跨度过程代码分析
  • js时间轴 相关电子书
    学习笔记
    网友NO.516911

    VUEJS实战之修复错误并且美化时间(2)

    前言 在上一章中,我们通过基础的搭建,成功的渲染了列表页面.但是,其中的问题是很多的.这一章,我们来解决这些问题. 使用 v-bind 绑定数据. 上一章的代码,我们渲染出来了页面.但是如果打开了控制台,你会发现有错误.如下图所示: 这是因为页面进来的时候,会先执行我们的html代码,而此时,我们的vue还没开始工作.而我们的代码如下: li v-for="info in data" i class="user_ico" img src="{{ info.author.avatar_url }}" alt="{{ info.author.loginname }}" span{{ info.author.loginname }}/span /i time class="time"{{ info.create_at }}/time a class="talk" href="content.html?{{ info.id }}"{{ info.title }}/a/li 如上,页面去解析 src="{{ info.author.avatar_url }}"的时候,当然是找不到这个图片路径的.因此,自然而然会出错.因此,我们需要来处理一下这个代码.我们修改为 img v-bind:src="info.author.avatar_url" v-bind:alt="info.author.loginname" 好,我们刷新一下页……

    网友NO.287480

    nodejs发送http请求时遇到404长时间未响应的解决方法

    通常,我们在使用nodejs发送http请求时,一旦遇到404响应,nodejs内部会一直请求下去,直到超出它自己设定的响应时长(最让人恶心的地方就是这个时长还是没法修改的。)很多人在这里碰到了麻烦。 我是在做arcgis地图项目的时候,客户提出需要使用天地图提供的底图服务,当时我直接使用silverlight客户端的Arcgis API进行http请求(同样是内部请求,不开源的东西就是这么让人郁闷),同样碰到了一个进度条一直卡在那的问题。经过调试发现,是由于底图加载请求超时的缘故,和nodejs一样,silverlight一直在进行请求直到超出它自己设定的响应时限。 于是,我当时正好有业余接触nodejs,觉得这个东西性能应该是不错的,至少比tomcat+java之流要好一些。于是,我着手写了一个nodejs的代理服务,用来请求天地图的底图。我当时以为nodejs碰到404时能直接结束请求,……

    网友NO.938706

    springboot json时间格式化处理的方法

    application.properties中加入如下代码 springboot 默认使用 jackson 解析 json spring.jackson.date-format=yyyy-MM-dd HH:mm:ssspring.jackson.time-zone=GMT+8 如果个别实体需要使用其他格式的 pattern,在实体上加入注解即可 import org.springframework.format.annotation.DateTimeFormat;import com.fasterxml.jackson.annotation.JsonFormat;public class MrType { @JsonFormat(timezone = "GMT+8",pattern = "yyyy-MM-dd") @DateTimeFormat(pattern="yyyy-MM-dd") private Date createdDate;} Spring Boot 日期数据格式转换@JsonFormat实例 pojo的bean里面通常会有Date类型的数据,直接通过@ResponseBody返回出去的是一个长整型时间戳(从1970到该变量时间的毫秒数),关于原因,网上很多,此处不细讲。如果想要返回自定义的日期格式,如:yyyymmddhhmmss,需做相关处理,网上有很多处理方式,大体都是继承、重写,比较复杂。实际上JSON已有注解@JsonFormat支持,使用实例: @Jso……

    <
    1
    >

    Copyright 2018-2020 www.xz577.com 码农之家

    版权投诉 / 书籍推广 / 赞助:520161757@qq.com