利用Jquery实现几款漂亮实用的时间轴（附示例代码)

前言

最近在项目中使用了很多前端的东西，对于我一个做后台开发的人员，这是一个很好的锻炼的机会。经过这段时间的学习，感觉前端的东西太多了，太强大了，做出来的东西太炫酷了。现在有很多开源的前端框架，做的都非常的漂亮h5发展了这么多年了，改变了互联网行业啊！

时间轴是一个按时间顺序描述一系列事件的很好方式，经常用在项目规划中。时间轴的典型方案通常设计成一个包含许多长条的带有数据标签的图形，当事件发生的时候则在这些长条的上方进行标记。下面给大家介绍几款漂亮的时间轴，也许大家以后工作中会用到。

一、纵向折叠时间轴

1、js文件(jQuery.js或者jQuery.min.js)

2、CSS文件

@ CHARSET ' UTF-8 '；/*=Reset=*/body，div，dl，dt，dd，ul，ol，li，h1，h2，h3，h4，h5，h6，pre，code，form，fieldset，legend，p，blockquote，th，td，figure { margin:0划水：0;}文章、侧边、细节、图形标题、图形、页脚、页眉、组、菜单、导航、部分{ display:block}表格{边框-折叠：折叠；边框间距：0;}标题，th { font-weight : normal；向左文本对齐：}fieldset，img { border :0 } ul Li { list-style : none；}h1、h2、h3、h4、h5、h6 { font-size :100%；} H5 { font size :18 px；边距-底部：20 pxcolor : # 666 } H5 span；color: # ccc字体粗细：正常；} blockquote:before，blockquote:after，q:before，q : after { content : }；} html {-web套件-文本-大小-调整：无；-ms-text-size-调整：无；} body { font : normal 14px/24px ' Helvetica Neue '，Helvetica，Theiti '微软雅黑','冬青黑体简体中文w3 '，宋体，Arial，Tahoma，无衬线，衬线；单词包装：断字；背景技术： # F0F 0；}输入、按钮、textarea、select、option、option group { font-family : inherit；font-size :继承；}代码，pre { font-family : ' Microsoft YaHei '，Consolas，' Courier New '，monospace}.bw0{border: none！重要；} * :focus { outline:0}图例{ color: # 000}输入，选择{竖排align:middle}按钮{ overflow : visible } input . button，button { cursor:pointer}按钮，输入，选择，text area { margin :0 } text area { overflow : autoresize : none }标签[针对]，输入[type='button']，输入[type='submit']，输入[type=' reset ']{光标：指针；}输入[type=' button ']:-moz-focus-inner，输入[type=' submit ']:-moz-focus-inner，输入[type=' reset ']:-moz-focus-inner，button :-moz-focus-inner { border