首页 > Web开发 > 详细

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

时间:2017-01-22 22:29:18      阅读:230      评论:0      收藏:0      [点我收藏+]

一、纵向折叠时间轴

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、运行效果

技术分享

 

 

-转载

 

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

原文:http://www.cnblogs.com/wenJiaQi/p/6341470.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!