jquery时间轴.docVIP

jQuery 调用时间轴插件非常简单，执行以下代码： ?$ function $ .timelinr orientation:vertical ;? ;? jQuery Timelinr提供了很多可设置的选项，可以根据需要进行设置。 选项 描述 默认值 orientation 时间轴方向，可为水平 horizontal 或垂直 vertical horizontal containerDiv 时间轴展示主区域ID #timeline datesDiv 时间轴主轴ID #dates datesSelectedClass 当前主轴轴点的样式 selected datesSpeed 主轴滚动速度，可为100～1000之间的数字，或者设置为slow, normal or fast normal issuesDiv 主要内容展示区 #issues issuesSpeed 对应内容区的滚动速度，可为100～1000之间的数字，或者设置为slow, normal or fast fast issuesTransparency 内容区的切入时的透明度，在0～1之间取值 0.2 issuesTransparencySpeed 内容区的切入时的透明度变化速度，100～1000之间的数字 500 prevButton 用于点击展示前一项内容的按钮ID #prev nextButton 用于点击展示后一项内容的按钮ID #next arrowKeys 是否支持方向键，true or false false startAt 初始化起点，即初始化轴点位置，数字 1 autoPlay 是否自动滚动，true or false false autoPlayDirection 滚动方向，forward or backward forward autoPlayPause 自动滚动时停留时间，毫秒 2000 支持滚轮驱动 此外，当前的jQuery Timelinr并不支持鼠标滚轮驱动，其实我们可以稍微对插件做下扩展就可以支持鼠标滚轮驱动，这里需要用到滚轮时间插件：jquery.mousewheel.js 下载该插件后，在页面中导入。 script?src jquery.mousewheel.js 然后，修改jquery.timelinr-0.9.53.js，大概在260行位置加入如下代码： ?// 我们在示例中屏蔽了按钮prevButton和nextButton，当设置了支持滚轮事件时，滚轮向上，相当于点击prevButton，滚轮向下，相当于点击了nextButton。 然后在32行处加入初始化选项： ?mousewheel:??false? 最后使用以下代码后，整个时间轴就可支持滚轮事件了，查看demo。 ?$ function $ .timelinr mousewheel:????true ;? ;