Several nice timeline implementations of jquery

Introduction

Recently the project used a lot of front-end things, for me a background development staff, this is a good exercise opportunities. After this period of study, feel the front-end of things too much, too strong, do something too cool. Now there are a lot of open-source front-end framework, do are very beautiful, H5 development for so many years, changed the Internet industry Ah! The following is to introduce several beautiful time axis, perhaps we will use in the future work.

One, longitudinal folding time axis

1. js file (jquery.js or JQuery.min.js)

2. css Files

View Code

3. HTML code

View Code

4. Operation Effect:

Second, longitudinal mouse sliding time axis

1. js file (jquery.js and jquery.mousewheel.js,jquery.easing.js, custom history.js)

(1) Jquery.mousewheel.js file

View Code

(2) Jquery.easing.js file

View Code

(3) History.js file

View Code

2. css Files

View Code

3. HTML code

View Code

4, the effect of operation:

Three, vertical foldable timeline

1. js file (Jquery.js and Main.js)

(1) Main.js file

View Code

2. css Files

View Code

3. HTML code

View Code

4. Operation Effect:

Four, transverse time axis

1. js file (Jquery.js and Jquery.timelinr-0.9.5.3.js)

(1) Jquery.timelinr-0.9.5.3.js file

View Code

2. css Files

View Code

3. HTML code

View Code

4. Operation effect

Because of the needs of the project, the leadership let me do a number, he picked one, there are many many examples, not listed. Here is a simple list of a few simple and generous examples, the need for small partners can tell me, we learn together.

Reproduced in this article

Several nice timeline implementations of jquery