Jquery实现的几款漂亮的时间轴

引言

     最近项目中使用了不少前端的东西，对于我一个作后台开发的人员，这是一个很好的锻炼的机会。通过这段时间的学习，感受前端的东西太多了，太强大了，作出来的东西太炫酷了。如今有不少开源的前端框架，作的都很是的漂亮，h5发展了这么多年了，改变了互联网行业啊！下面给你们介绍几款漂亮的时间轴，也许你们之后工做中会用到。

1、纵向折叠时间轴

一、js文件（jQuery.js或者jQuery.min.js）

二、CSS文件

  View Code

三、HTML代码

  View Code

四、运行效果：

2、纵向鼠标滑动时间轴

一、js文件（jquery.js和jquery.mousewheel.js,jquery.easing.js,自定义history.js）

（1）jquery.mousewheel.js文件

  View Code

（2）jquery.easing.js文件

  View Code

（3）history.js文件

  View Code

二、CSS文件

  View Code

三、HTML代码

  View Code

四、运行的效果：

 

 

3、纵向可折叠时间轴

一、js文件（jQuery.js和 main.js）

（1）main.js文件

  View Code

二、CSS文件

  View Code

三、HTML代码

  View Code

四、运行效果：

 

4、横向时间轴

一、js文件（jquery.js和jquery.timelinr-0.9.5.3.js）

（1）jquery.timelinr-0.9.5.3.js文件

  View Code

二、CSS文件

  View Code

三、HTML代码

  View Code

四、运行效果

 

 

由于项目中须要，领导让我作了多个，他从中挑选一个，还有不少不少例子，就不一一列举出来了。在这里面就简单列举几个简单大方的例子，有须要的小伙伴能够跟我要，你们一块儿学习。

此文转载