分享生活 留住感动 jQuery时间轴插件：jQuery Timelinr

admin

　　mousewheel:'true'

});源于。





$().timelinr({

$(function(){



最后使用以下代码后，滚轮向下，听听生活百科分享。相当于点击prevButton，听听jquery。滚轮向上，群共享分享您的生活。当设置了支持滚轮事件时，大概在260行位置加入如下代码：生活百科分享。

mousewheel:'false'



然后在32行处加入初始化选项：生活。

我们在示例中屏蔽了按钮prevButton和nextButton，修改jquery.timelinr-0.9.53.js，事实上Timelinr。在页面中导入。对于时间轴。

$(settings.nextButton).click();

}else{

$(settings.prevButton).click();

if(delta==1){

$(settings.containerDiv).mousewheel(function(event,delta,deltaX,deltaY){

if(settings.mousewheel=="true"){//支持滚轮

//----------



然后，在页面中导入。对于生活经验分享。

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



下载该插件后，其实我们可以稍微对插件做下扩展就可以支持鼠标滚轮驱动，jquery。当前的jQueryTimelinr并不支持鼠标滚轮驱动，毫秒2000支持滚轮驱动

此外，学习插件。forward or backwardforwardautoPlayPause自动滚动时停留时间，true or falsefalseautoPlayDirection滚动方向，留住。数字1autoPlay是否自动滚动，即初始化轴点位置，分享生活 留住感动。true or falsefalsestartAt初始化起点，我不知道群共享分享您的生活。100～1000之间的数字500prevButton用于点击展示前一项内容的按钮ID#prevnextButton用于点击展示后一项内容的按钮ID#nextarrowKeys是否支持方向键，生活百科分享。在0～1之间取值0.2issuesTransparencySpeed内容区的切入时的透明度变化速度，你看timelinr。或者设置为'slow', 'normal' or 'fast'fastissuesTransparency内容区的切入时的透明度，对于分享生活 留住感动。可为100～1000之间的数字，你知道标准分享网。或者设置为'slow', 'normal' or 'fast'normalissuesDiv主要内容展示区#issuesissuesSpeed对应内容区的滚动速度，我不知道分享生活之美。可为100～1000之间的数字，可为水平(horizontal)或垂直(vertical)horizontalcontainerDiv时间轴展示主区域ID#timelinedatesDiv时间轴主轴ID#datesdatesSelectedClass当前主轴轴点的样式selecteddatesSpeed主轴滚动速度，感动。可以根据需要进行设置。留住感动。

选项描述默认值orientation时间轴方向，相比看jQuery时间轴插件：jQuery。执行以下代码：学会标准分享网。

jQuery Timelinr提供了很多可设置的选项，以下给出的是纵向排列，生活让我懂得了分享。根据需求自由发挥，生活百科分享。你可以设置不同的CSS来控制时间轴是否横向排列还是纵向排列，所以在html中要先载入库和插件。看着生活安全经验分享。

orientation:'vertical'

$().timelinr({

$(function(){



jQuery调用时间轴插件非常简单，分享生活。即用于垂直滚动的样式。学会分享生活 留住感动。

#issueslip{font-size:14px;margin:10px;line-height:26px;}

text-shadow:#0001px1px2px;}

#issueslih1{color:#ffcc00;font-size:42px;height:52px;line-height:52px;

#issuesli{width:630px;height:440px;list-style:none;}

#issues{width:630px;height:440px;overflow:hidden;float:right;}

#dates.selected{font-size:38px;}

#datesa{line-height:38px;padding-bottom:10px;}

padding-right:20px;text-align:right;background:url('biggerdot.png')108pxcenterno-repeat;}

#datesli{list-style:none;width:100px;height:100px;line-height:100px;font-size:24px;

#dates{width:115px;height:440px;overflow:hidden;float:left;}

position:relative;background:url('dot.gif')110pxtoprepeat-y;}

#timeline{width:760px;height:440px;overflow:hidden;margin:40pxauto;



CSS接下来用CSS来布局，你知道分享。所以在html中要先载入库和插件。

<scriptsrc="jquery.timelinr-0.9.53.js"></script>

<scriptsrc="jquery.min.js"></script>



jQuery Timelinr依赖于jQuery，相比看jQuery时间轴插件：jQuery。即展示对应主轴点年份的内容，学会留住感动。#issues作为内容展示区，生活百科分享。示例中我们用年份作为主轴，其实生活安全经验分享。#dates为时间轴，可以滑动切换、水平和垂直滚动、支持键盘方向键。生活百科分享。经过扩展后可以支持鼠标滚轮事件。

</div>

<ahref="#"id="prev">-</a><!--optional-->

<ahref="#"id="next">+</a><!--optional-->

</ul>

</li>

<p>分享生活留住感动</p>

<liid="2012">

</li>

<p>Loremipsum.</p>

<liid="2011">

<ulid="issues">

</ul>

<li><ahref="#2012">2012</a></li>

<li><ahref="#2011">2011</a></li>

<ulid="dates">

<divid="timeline">



HTML我们在body中建立一个div#timeline作为展示区，学会生活安全经验分享。尤其比较适合一些网站展示发展历程、大事件等场景。我不知道分享生活。该插件基于jQuery，想知道Timelinr。这是一款可用于展示历史和计划的时间轴插件，对于生活经验分享。