The timeline is chronological,Chain events on one or more sides,Forming a relatively complete record system,Then use graphic form to present to users,This article has collected a good one on the Internet,Share with everyone


This is a timeline plugin for showing history and planning.Especially suitable for some websites to display development history, major events and other scenarios.The plugin is based on jquery, it can slide switch, horizontal and vertical scrolling, support keyboard arrow keys.It can be extended to support mouse wheel events.


We create a div #timeline in the body as a display area,#dates is the timeline.In the example we use the year as the main axis,#issuesAs a content showcase,Shows the content of the year corresponding to the principal point,Note that the id corresponds.

   <li><a href="#2011">2011</a></li>
   <li><a href="#2012">2012</a></li>
     <p>lorem ipsum.</p>
     <p>Sharing life Keep moving</p>
  <a href="#">+</a><!-Optional->
  <a href="#">-</a><!-Optional->

jquery timelinr depends on jquery, so you must first load the jquery library and jquery timelinr plugin in html.

<script type="text/javascript" src="jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="jquery.timelinr-0.9.53.js"></script>


Next use css for layout, you can set different css to control whether the timeline is arranged horizontally or verticallyFreedom according to demand,Given below is the vertical arrangement,The style used for vertical scrolling.

#timeline {width:760px;height:440px;overflow:hidden;margin:40px auto;
position:relative;background:url ("dot.gif") 110px top repeat-y;}
#dates {width:115px;height:440px;overflow:hidden;float:left;}
#dates li {list-style:none;width:100px;height:100px;line-height:100px;font-size:24px;
 padding-right:20px;text-align:right;background:url ("biggerdot.png") 108px center no-repeat;}
#dates a {line-height:38px;padding-bottom:10px;}
#dates .selected {font-size:38px;}
#issues {width:630px;height:440px;overflow:hidden;float:right;}
#issues li {width:630px;height:440px;list-style:none;}
#issues li h1 {color:#ffcc00;font-size:42px;height:52px;line-height:52px;
 text-shadow:#000 1px 1px 2px;}
#issues li p {font-size:14px;margin:10px;line-height:26px;}


Calling the timeline plugin is very simple,Execute the following code:

$(function () {
  $(). timelinr ({

jquery timelinr provides many configurable options,Can be set as required.as the picture shows:

Support wheel drive

In addition, the current jquery timelinr does not support mouse wheel drive,In fact, we can slightly extend the plug-in to support mouse wheel drive.Here you need to use the wheel time plugin:jquery.mousewheel.js

After downloading the plugin,Import in the page:

<script src="jquery.mousewheel.js"></script>

Then, modify jquery.timelinr-0.9.53.js and add the following code at about 260 lines:

//-------------- added by helloweba.com 20130326 ----------
if (settings.mousewheel == "true") {//Support scroll wheel
  $(settings.containerdiv) .mousewheel (function (event, delta, deltax, deltay) {
    if (delta == 1) {
      $(settings.prevbutton) .click ();
    } else {
      $(settings.nextbutton) .click ();

We blocked the buttons prevbutton and nextbutton in the example. When the support for the scroll event is set,Wheel up,Equivalent to clicking prevbutton with the scroll wheel down,Equivalent to clicking the nextbutton.

After finally using the following code,Wheel events are supported throughout the timeline

$(function () {
  $(). timelinr ({
  • Previous Java implementation of simple calculator class instance
  • Next Detailed character-oriented output stream in Java programming