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