Html5+css3+jquery Realization of Pure manual vertical Time axis "attached source"

Objective

Due to the needs of the work, the system needs to record events occurring at different times, in order to improve the user experience, decided to use the time axis to achieve. [It is said that this thing is very hot, QQ space and FB are in use ...]

This time axis is on the Sansheng stone on the basis of the blogger's time axis modified, can be called the enhanced version of it!

Compatibility

Firefox, Chrome, 360 haste, 360 Security browser, IE8, others are not tested, but there are some problems with compatibility on IE.

Effect Preview

Operation Demo

Implementation process

I do the backend, so the page design is not very good to look at. You can modify the page yourself.

　　1. Layout

Page layout not much to say, is pure div+css realization, nothing special. On each node of the timeline, there is a large div layer (id=content201301), where the content is a fixed field, followed by the date of the node, which is realized by clicking on the upper left corner of the month can be automatically positioned to this div height. In addition, this stitching method is also convenient after the background template. The large div layer then has a few small div layers (id=divcount), where the Id is fixed, used to store the content, and a floating float:left effect is added to these layers.

　　2. Zoom

The next step is to achieve shrinkage, which uses the Slidedown (), Slideup () method of jquery to perform a simple zoom animation.

　　3. Icon animation on the time node

This icon uses the CSS3 rotation, the code is as follows:

1          ul.timeline li. number. hand_img2{3 Margin-top:3px;4 cursor:Pointer;5 Zoom:1;6 -webkit-transition:-webkit-transform 0.8s ease-in;7 -moz-transition:-moz-transform 0.8s ease-in;8 -o-transition:-o-transform 0.8s ease-in;9 transition:Transform 0.8s ease-in;Ten} One  A         . Rotation -{ - -moz-transform:Rotate (90deg); the -webkit-transform:Rotate (90deg); - -o-transform:Rotate (90deg); - Transform:Rotate (90deg); - Filter: +             progid:DXImageTransform.Microsoft.BasicImage (rotation=2); -}

In this way, two consecutive animations are basically implemented. Very simple.

　　4. HTML5 Web Video

Because there may be video, there is a HTML5 player embedded in it, but this player requires browser support !

Here the use of Video.js this HTML player, import video.js, VIDEO.CSS, specific configuration, in the source write.

1 <Scriptsrc= "Video/video.js"></Script>2 <VideoID= "Video_2"class= "Video-js Vjs-default-skin"controls preload= "None" Poster= "Video/resources/3.png"width= "640"Height= "364"Data-setup= ' {' example_option ': true} '>4       <Sourcesrc= "Video/resources/3.mp4"type= ' Video/mp4 '/>5        < TrackKind= "captions"src= "VOIDEO/CAPTIONS.VTT"Srclang= "en"label= "中文版" />6 </Video> 

　　5, the Mini-time menu in the upper left corner

This part does not elaborate, a pen has been carried. This mini timeline, is nested two UL made of the menu, set the style and use of jquery animation method can be completed, or not very clear, the source is also written, also added comments.

Postscript

At the beginning of the decision to write time axis, in the internet looking for jquery plug-ins, and later in Sanseng blog inside saw him write the article, point woke me, this function, completely can own pure handwriting, animation is not complex, and the online jquery plugin is too bloated. As a result, the whole morning was finished, it turns out, on their own or the line of the pass!

Since this module is fully handwritten, the future needs to be modified, can be easily modified! If you use the jquery plug-in online, it will be miserable ...

Related Resources

Html5+css3+jquery implements a purely handmade vertical time axis "power Enhanced": http://download.csdn.net/detail/a406502972/8021863

Note: Found csdn above someone will transfer resources after high price sale, despise ... So add a password, extract password: HTML5

Html5+css3+jquery Realization of Pure manual vertical Time axis "attached source"