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

  • 时间:
  • 3409人关注

本文主要介绍了js实现新增加事件:时间轴自动排列效果的实例,具有很好的参考价值。下面跟着小编一起来看下吧,另外这篇文章主要知识点是关于js、时间轴、js时间轴的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下电子资料:

教程详情电子资料
  • 教程类别:js时间轴
  • 编辑整理:后兴国
  • 教程字数:3881字节
  • 阅读时间:大概14分钟
  • 下载本教程(DOC版)
  • 《Vue.js前端开发基础与项目实战》项目源码
  • JSON-handle
  • Quick Javascript Switcher
  • Vue.js devtools
  • JSON Formatter
  • 效果图:

    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 中的 JSON的知识点整理

    下一篇:介绍100多个基础常用JS函数和语法

    相关内容

    • java与jsp的区别

      java是一种语言类似于C语言等的编程语言,而JSP(JavaServer Pages)是一种动态网页技术标准。 JSP和JAVA的区别,JSP算是JAVA一种技术吧,用在网页编程上,因为JAVA不能直接写在html上,但jsp能,jsp就是Servlet程序,当JSP收到客户的请求时,SCRIPTLET(脚本小程序)就会被执行,脚本段将被插入到JSP所生成的目标Servlet的Serivce函数中.所以脚本小程序不能写方法(函数),因为方法里面不能再有方法了.JSP的执行过程。 1、首先,JAVA是一门

      12-17JSP和JAVA的区别

      阅读更多
    • js可以替代java吗

      nodejs不会替代java。在虚拟机层面 node.js 基于的v8 VM看起来很不错,但和Java的 VM 一比,差距甚远。在服务器领域,特别是拥有众多 CPU 和大量内存的环境下,Java 的 VM 几乎是你能在地球上找到的最好的 VM。而v8既不能充分利用多CPU的性能,也不能将内存充分利用。Node.js是从前端转过来的,恰恰前端是计算机领域少数几个不需要计算机体系知识就能胜任的职业。想要真正做到像java那样水平,计算机体系性的知识必不可少。Node.js特别适合中小型系统的快速开

      12-13js能替代java吗

      阅读更多
    • JAVA直接访问jsp页面报404吗

      404表示的是路径未找到错误,解决办法如下: 【解决方法】 1、首先看错误信息 第一行 2、这里有出错的路径,也就是哪个找不到的路径 3、然后回程序中找调用这个路径的地方,确定路径写的是否正确,是否可达。 JSP页面运行时报的404错处理方法如下: 保证在你的Console窗口中看不到任何起到影响的Exception(jsp在编译的时候会先检查web.xml文件,如果全部正常,没有任何Exception的话,才会成功部署到.metadata\.plugins\org.eclipse.wst.server.

      12-12JAVA访问jsp页面报404吗

      阅读更多
    • jsp实质是java程序对吗

      JSP页面在本质上就是Servlet程序,当JSP页面在首次被访问时,Web容器就会将JSP页面转化为Servlet,只需要做一次。如index.jsp在首次被访问时,Web容器会将其翻译成一个index_jsp.java文件,即Servlet代码。 JSP是服务器端的一种基于java语言的网页技术,它是由一些JSP标记,java程序段以及HTML文件组成的结合体,以java语言作为其内置的脚本语言。实质上是通过调用JSP引擎来生成java文件,再将这个java文件编译成类文件,并执行这个类文件以生成动态

      12-05jsp实质是java程序吗

      阅读更多
    • jsp文件就是java文件吗

      jsp文件不是java文件,java是一种语言类似于C语言等的编程语言,而JSP(JavaServer Pages)是一种动态网页技术标准。jsp是一个网页页面,相当于复杂的html。其中可以插入script代码,当然也可以插入java代码。j ava是一个类文件,在java学习初期主要是写java文件的。如果不写页面的话是没有页面效果的。 1、JSP的写的代码,不利于代码重用。JAVA本来就是面向对象的语言,但在JSP中,体现不出来代码重用的优势。如果把一些通用的代码写成JAVA文件,就方便了很多,例

      12-02jsp文件是java文件吗

      阅读更多
    • JavaScript之美

      JavaScript之美

      阅读文章这书好像是坐着来与一些JavaScript大师共进午餐,听她们探讨她们现场不断涌现出去的新念头。JavaScript能够说成全世界*异议和别人误会*多的程序语言。许多人企图用别的语言替代它的

      大小:94 MBJavaScript

      点击下载
    • JavaScript网页动画设计

      JavaScript网页动画设计

      JavaScript网页动画设计 由业界先进的动画库Velocity。js的作者所著,书中内容共分为8章,简明扼要地总结了在网页上使用动画的技术技巧,让读者掌握如何有效利用动画实现无与伦比的用户体验

      大小:26 MBJavaScript

      点击下载
    • JavaScript函数式编程

      JavaScript函数式编程

      JavaScript 是近年来非常受瞩目的一门编程语言,它既支持面向对象编程,也支持函数式编程。本书专门介绍JavaScript函数式编程的特性。

      大小:42158 MB MJavaScript

      点击下载
    • PHP、MySQL与JavaScript学习手册(第4版)

      PHP、MySQL与JavaScript学习手册(第4版)

      本书有借助面向对象的编程基础,深入学习PHP。研究MySQL,从数据库结构到复杂查询。掌握JavaScript语言,以及带有jQuery的增强功能。调用Ajax进行后台浏览器/服务器通信等,欢迎免费下载

      大小:76 MBPHP

      点击下载
    • 看透JavaScript:原理、方法与实践

      看透JavaScript:原理、方法与实践

      本书由资深软件开发专家撰写,凝聚其多年开发经验,系统、深入、全面地阐释JavaScript,内容涉及流行的Web开发实践,结合实际案例进行讲解,授人以渔。本书内容并不局限于某个具体功能的

      大小:251 MBJavaScript

      点击下载
    • JavaScript数据可视化编程

      JavaScript数据可视化编程

      大小:61.8 MBjs编程

      点击下载
    • 移动网页设计与开发:HTML5+CSS3+JavaScript

      移动网页设计与开发:HTML5+CSS3+JavaScript

      将落伍的网址打导致更为灵便、友善,而且令其充分运用不一样机器设备和电脑浏览器的与众不同优点。根据《移动网页设计与开发HTML5+CSS3+JavaScript》,您将为投身第一线开发充分准备! *內容

      大小:30.2 MB移动开发

      点击下载
    • 你不知道的JavaScript 下卷

      你不知道的JavaScript 下卷

      本书讲解JavaScript开发人员不求甚解的大趋势,深入理解语言内部的机制,全面介绍JavaScript中常被人误解和忽视的重要知识点,分为上中下三套,欢迎下载

      大小:7 MBJavaScript

      点击下载
    • 你不知道的JavaScript(中卷)

      你不知道的JavaScript(中卷)

      JavaScript这门语言简单易用,很容易上手,但其语言机制复杂微妙,即使是经验丰富的JavaScript开发人员,如果没有认真学习的话也无法真正理解。

      大小:7.8 MBJS

      点击下载

    学习笔记

    14小时5分钟前回答

    小结WdatePicker.js时间日期插件的用法

    本文介绍了WdatePicker.js时间插件使用,分享给大家,具体如下: 引用: 在项目中引用plugin-clander文件夹。 在html中引用WdatePicker.js即可。 script src=js/plugin-clander/WdatePicker.js/script 1.没有对控件进行设置 input class=Wdate type=text onfocus=WdatePicker()/ 2.限制日期的范围是 2006-09-10到2008-12-20 input id=d411 class=Wdate type=text onfocus=WdatePicker({skin:whyGreen,minDate: 2006-09-10, maxDate: 2008-12-20 })/ 3.限制日期的范围是 2008-3-8 11:30:00 到 2008-3-10 20:59:30 input type=text class=Wdate id=d412 onfocus=WdatePicker({skin:whyGreen,dateFmt: yyyy-MM-dd HH:mm:ss, minDate: 2008-03-08 11:30:00, maxDate: 2008-03-10 20:59:30 }) value=2008-03-09 11:00:00/ 4.限制日期的范围是 2008年2月 到 2008年10月 input ty……

    42小时14分钟前回答

    JS中setTimeout时间设置为0操作方法

    前言 本文主要给大家介绍了关于setTimeout时间设置为0的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧。 1、开胃菜,setTimeout为何物 首先看一下w3school上面对于setTimeout的解释 setTimeout(fn,millisec) 方法用于在指定的毫秒数后调用函数或计算表达式。 很简单, setTimeout() 只执行 fn 一次,到底什么时候执行取决于第二个参数millisec设定的毫秒数,所以很多人习惯上称之为延迟,无非就是延迟一段时间后再执行里面的代码。 setTimeout(function(){ console.log(我是setTimeout);}, 1000); 正常情况下,我是setTimeout 这句话并不会马上输出而是等1000毫秒以后会在浏览器的控制台输出。 2、主菜,……

    21小时14分钟前回答

    轻量级的js时间库miment使用实例

    介绍 Miment 是一个轻量级的时间库(打包压缩后只有1K),没有太多的方法, Miment的设计理念就是让你以几乎为零的成本快速上手,无需一遍一遍的撸文档 由来 首先 致敬一下Moment,非常好用的一个时间库,我本身也是Moment重度使用者,用习惯了Moment,一碰到需要处理时间的需求,立马Moment,不过有时候想想,Moment给我们提供了那么多的功能,但是我们天天用的,也就那么一两个,刚好最近在写微信小程序,然后在页面引入Moment,打包完,包竟然大了200多K,把Moment去掉,就直接少掉200多K,反复试了好几次,确定一个Moment在小程序里面,占用大概200K的空间。 于是就想自己写一个类似Moment的精简的时间库,于……

    12小时43分钟前回答

    js设置默认时间跨度过程代码分析

    有一个项目,需求是进入首页要显示一个月之内的历史记录,所以从前台传到后台的结束时间为当前日期,开始时间为往前一个月。 例如,现在是2018/04/17,则结束时间为2018/04/17,开始时间为2018/03/17. 将开始时间和结束时间传到后台即可。js代码如下: var end;var start;$(function(){var myDate = new Date();myDate.getFullYear(); //获取完整的年份(4位,1970-????)myDate.getMonth(); //获取当前月份(0-11,0代表1月)myDate.getDate(); //获取当前日(1-31)myDate.getDay(); //获取当前星期X(0-6,0代表星期天)myDate.getTime(); //获取当前时间(从1970.1.1开始的毫秒数)myDate.getHours(); //获取当前小时数(0-23)myDate.getMinutes(); //获取当前分钟数(0-59)myDate.getSeconds(); //获取……