Shulou(Shulou.com)06/03 Report--

This article will explain in detail how to use the jQuery timeline plug-in jQueryTimelinr, the content of the article is of high quality, so the editor will share it for you as a reference. I hope you will have a certain understanding of the relevant knowledge after reading this article.

This is a timeline plug-in that can be used to show history and planning, especially suitable for some websites to show the development process, major events and other scenarios. Based on jQuery, the plug-in can slide and switch, scroll horizontally and vertically, and support keyboard arrow keys. The mouse wheel event can be supported after the extension.

HTML

We set up a p#timeline in body as the display area, and # dates as the timeline. In the example, we use the year as the main axis and # issues as the content display area, that is, to display the content of the year corresponding to the principal axis point. Note that the id corresponds to.

2011 2012

Lorem ipsum.

Share your life and stay moved.

+-

JQuery Timelinr depends on jQuery, so load the jQuery library and jQuery Timelinr plug-in first in html.

CSS

Then use CSS to layout, you can set different CSS to control whether the timeline is arranged horizontally or longitudinally, and play freely according to the demand, the following is the vertical arrangement, that is, the style for vertical scrolling.

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

JQuery

Invoking the Timeline plug-in is very simple and executes the following code:

$(function () {$() .timelinr ({orientation:'vertical'});})

JQuery Timelinr provides a number of options that can be set as needed.

Option describes the default orientation timeline direction, which shows the main area for horizontal (horizontal) or vertical (vertical) horizontal containerDiv timeline the style selected datesSpeed spindle scrolling speed of ID # timeline datesDiv timeline principal axis ID # dates datesSelectedClass current principal axis pivot point, which can be a number between 100 and 1000, or set to 'slow',' normal' or 'fast' normal issuesDiv main content display area # issues issuesSpeed corresponding to the content area scrolling speed It can be a number between 100,000and 1000, or it can be set to 'slow',' normal' or 'fast' fast issuesTransparency content area's entry transparency, the transparency change rate of 0.2 issuesTransparencySpeed content area between 0,000,500 prevButton is used to click on the button to display the previous item, whether the button ID # next arrowKeys is used to display the latter content is supported or not. True or false false startAt initialization starting point, that is, initialization pivot point position, whether the number 1 autoPlay scrolls automatically, true or false false autoPlayDirection scrolling direction, forward or backward forward autoPlayPause automatic scrolling stay time, millisecond 2000

Support for roller drive

In addition, the current jQuery Timelinr does not support mouse wheel drive, in fact, we can slightly expand the plug-in to support mouse wheel drive, here we need to use the wheel time plug-in: jquery.mousewheel.js

After downloading the plug-in, import it on the page.

Then, modify the jquery.timelinr-0.9.53.js by adding the following code at about 260th line:

/ /-Added by xuebuyuan.com 20130326-if (settings.mousewheel== "true") {/ / support roller $(settings.containerDiv) .mousewheel (function (event, delta, deltaX, deltaY) {if (delta==1) {$(settings.prevButton). Click ();} else {$(settings.nextButton). Click ();}});}

We have shielded the buttons prevButton and nextButton in the example. When the scroll wheel event is set, the scroll wheel is up, which is equivalent to clicking prevButton, and the scroll wheel is down, which is equivalent to clicking nextButton.

Then add the initialization option at line 32:

Mousewheel: 'false'

Finally, after using the following code, the entire timeline can support the wheel event. Check out the demo.

$(function () {$() .timelinr ({mousewheel:'true'});})

About how to use the jQuery timeline plug-in jQueryTimelinr to share here, I hope the above content can be of some help to you, can learn more knowledge. If you think the article is good, you can share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.