JQuery Timelinr Implement vertical horizontal time axis plug-in (source download) _jquery

Jquery.timelinr.js is a very cool jquery time Axis plug-in. Jquery.timelinr can make horizontal and vertical timeline effects, and can be played automatically. You can use the parameters to control the animation effect of each time axis switch.

Recommended reading: Previously shared a short history of jquery Enterprise Development Timeline Special effects source code, its interface display effect is very good.

Effect Display source Download

How to use

Using this timeline plug-in requires the introduction of jquery and Jquery.timelinr.js files in the page.

<script src= "Js/jquery-1.x.x.min.js" ></script>
<script src= "Js/jquery.timelinr-0.9.x.js" > </script>

HTML structure

The basic HTML structure for this timeline plug-in is as follows:

<div id= "Timeline" >
<ul id= "Dates" >
<li><a href= "#" >date1</a></li>
<li><a href= "#" >date2</a></li>
</ul>
<ul id= "Issues" >
< Li id= "date1" >
<p>lorem ipsum.</p>
</li>
<li id= "Date2" >
<p> Lorem ipsum.</p>
</li>
</ul>
<a href= "#" id= "Next" >+</a> <!-- Optional-->
<a href= "#" id= "prev" >-</a> <!--optional-->
</div>

Initializing Plug-ins

After the page DOM element has been loaded, you can initialize the timeline plug-in in the following ways.

$ (function () {
$ (). Timelinr ();
});

Configuration parameters

The configuration parameters for the Jquery.timelinr.js timeline plug-in are:

Orientation: The direction of the timeline, optional values are: Horizontal | Vertical The default value is ' horizontal '.
Containerdiv: The ID selector for the timeline container Div. The default is: ' #timeline '.
Datesdiv: The ID selector of the container that displays the time. The default is: ' #dates '.
Datesselectedclass: Class for the currently selected time. The default value is: ' Selected '.
Datesspeed: Animation speed for the timeline. Value from 100-1000, or ' slow ', ' normal ', ' fast '. The default value is: ' normal '.
Issuesdiv: The id selector of the div for information description. The default is: ' #issues '.
Issuesselectedclass: The class of the div that the currently selected information describes. The default value is: ' Selected '.
Issuesspeed: The animation speed of the div that the information describes. Value from 100-1000, or ' slow ', ' normal ', ' fast '. The default value is: ' Fast '.
Issuestransparency: The transparency of the div that the information describes. Value 0-1, the default value is 0.2.
Issuestransparencyspeed: The speed of the transparency animation. The value is from 100-1000, and the default is 500.
Prevbutton: The ID selector for the forward button. The default is: ' #prev '.
Nextbutton: The ID selector for the back button. The default is: ' #next '.
Arrowkeys: Whether the keyboard is allowed to be used for control. The default is: false.
StartAt: Index subscript at the beginning, defaults to 1.
AutoPlay: Whether to play automatically. Default is ' false '.
Autoplaydirection: The direction in which to play automatically. Optional values are: Forward | Backward. The default value is: ' Forward '.
Autoplaypause: The interval at which AutoPlay is played. Integer value, 1000 = 1 seconds, default is 2000. The
Jquery.timelinr.js GitHub address for the timeline plug-in is: Https://github.com/juanbrujo/jQuery-Timelinr

The above is about jquery timelinr to achieve vertical horizontal time axis plug-ins related content, I hope to help!