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

四、運行效果

 

 

由於項目中須要，領導讓我作了多個，他從中挑選一個，還有不少不少例子，就不一一列舉出來了。在這裏面就簡單列舉幾個簡單大方的例子，有須要的小夥伴能夠跟我要，你們一塊兒學習。

此文轉載