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

一、纵向折叠时间轴

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

2、CSS文件

 View Code

3、HTML代码

 View Code

4、运行效果：

二、纵向鼠标滑动时间轴

1、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

2、CSS文件

 View Code

3、HTML代码

 View Code

4、运行的效果：

 

 

三、纵向可折叠时间轴

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

（1）main.js文件

 View Code

2、CSS文件

 View Code

3、HTML代码

 View Code

4、运行效果：

 

四、横向时间轴

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

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

 View Code

2、CSS文件

 View Code

3、HTML代码

 View Code

4、运行效果

 

 

-转载

 

posted @ 2017-01-22 21:45  W+7  阅读(1004)  评论(0)  编辑  收藏  举报