Jquery實現的幾款漂亮的時間軸

     最近項目中使用了很多前端的東西，對於我一個做后台開發的人員，這是一個很好的鍛煉的機會。經過這段時間的學習，感覺前端的東西太多了，太強大了，做出來的東西太炫酷了。現在有很多開源的前端框架，做的都非常的漂亮，h5發展了這么多年了，改變了互聯網行業啊！下面給大家介紹幾款漂亮的時間軸，也許大家以后工作中會用到。

一、縱向折疊時間軸

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

2、CSS文件

 

3、HTML代碼

 

4、運行效果：

二、縱向鼠標滑動時間軸

1、js文件（jquery.js和jquery.mousewheel.js,jquery.easing.js,自定義history.js）

（1）jquery.mousewheel.js文件

 

（2）jquery.easing.js文件

 

（3）history.js文件

 

2、CSS文件

 

3、HTML代碼

 

4、運行的效果：

 

 

三、縱向可折疊時間軸

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

（1）main.js文件

 

2、CSS文件

 

3、HTML代碼

 

4、運行效果：

 

四、橫向時間軸

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

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

 

2、CSS文件

 

3、HTML代碼

 

4、運行效果

 

 

因為項目中需要，領導讓我做了多個，他從中挑選一個，還有很多很多例子，就不一一列舉出來了。在這里面就簡單列舉幾個簡單大方的例子，有需要的小伙伴可以跟我要，大家一起學習。

此文轉載