申博娱乐138

 找回密码
 立即注册
搜索
查看: 370|回复: 0

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

[复制链接]

1589

主题

0

好友

5285

积分

管理员

Rank: 9Rank: 9Rank: 9

发表于 2013-8-27 03:59:42 |显示全部楼层

  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。这是一款可用于展示历史和计划的时间轴插件,对于生活经验分享。

回复 百度 谷歌 雅虎 搜狗 搜搜

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

网站地图|百度地图|申博 (皖ICP备10006878号)

GMT+8, 2019-2-16 21:39 , Processed in 0.073664 second(s), 30 queries .

Powered by 申博 X2.5

© 2001-2012 申博娱乐

回顶部