老牌滚动时间轴jQuery插件Timelinr

栏目: jQuery · 发布时间: 6年前

内容简介:jquery.timelinr.js是一款老牌时间轴插件,可以制作水平和垂直时间轴效果,并且可以进行自动播放。你可以通过参数来控制每次时间轴切换的动画效果。Github地址:https://github.com/juanbrujo/jQuery-Timelinr

jquery.timelinr.js是一款老牌时间轴插件,可以制作水平和垂直时间轴效果,并且可以进行自动播放。你可以通过参数来控制每次时间轴切换的动画效果。

老牌滚动时间轴jQuery插件Timelinr

引用js文件:

<script src="js/jquery-1.x.x.min.js"></script>
<script src="js/jquery.timelinr-0.9.x.js"></script>

HTML结构:

<div id="timeline">
	<ul id="dates">
		<li><a href="#">date1</a></li>
		<li><a href="#">date2</a></li>
	</ul>
	<ul id="issues">
		<li id="date1">
			<p>Lorem ipsum.</p>
		</li>
		<li id="date2">
			<p>Lorem ipsum.</p>
		</li>
	</ul>
	<a href="#" id="next">+</a> <!-- optional -->
	<a href="#" id="prev">-</a> <!-- optional -->
</div>

初始化插件:

$(function(){
	$().timelinr();
});

配置参数:

  • orientation:时间轴的方向,可选值有:horizontal | vertical默认值为'horizontal'。
  • containerDiv:时间轴容器DIV的ID选择器。默认为:'#timeline'。
  • datesDiv:显示时间的容器的ID选择器。默认为:'#dates'
  • datesSelectedClass:当前选中时间的class。默认值为:'selected'。
  • datesSpeed:时间轴的动画速度。值从100-1000,或'slow','normal','fast'。默认值为:'normal'。
  • issuesDiv:信息描述的DIV的ID选择器。默认为:'#issues'。
  • issuesSelectedClass:当前选择的信息描述的DIV的class。默认值为:'selected'。
  • issuesSpeed:信息描述的DIV的动画速度。值从100-1000,或'slow','normal','fast'。默认值为:'fast'。
  • issuesTransparency:信息描述的DIV的透明度。值0-1之间,默认值为0.2。
  • issuesTransparencySpeed:透明度动画的速度。值从100-1000之间,默认为500。
  • prevButton:向前按钮的ID选择器。默认为:'#prev'。
  • nextButton:向后按钮的ID选择器。默认为:'#next'。
  • arrowKeys:是否允许使用键盘来控制。默认为:false。
  • startAt:开始的索引下标,默认为1。
  • autoPlay:是否自动播放。默认为'false'。
  • autoPlayDirection:自动播放的方向。可选值有:forward | backward。默认值为:'forward'。
  • autoPlayPause:自动播放的间隔。整数值,1000 = 1秒,默认为2000。

Github地址:https://github.com/juanbrujo/jQuery-Timelinr


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

支付革命

支付革命

马梅、朱晓明、周金黄、季家友、陈宇 / 中信出版社 / 2014-2-1 / 49.00元

本书是中国首部深入探讨第三方支付的著作。 本书以电子交易方式、电子货币及电子认证技术演变的“三重奏”将决定电子支付中介的发展为主线,分析了中国第三方支付从“小支付”走向“大金融”的历史逻辑、技术逻辑和商业逻辑,揭示了第三方支付特别是创新型第三方支付机构发展对提升中国经济运行效率的作用,分析了第三方支付的未来发展趋向,并提出了相应的政策建议。 本书旨在以小见大,立足于揭示互联网与移动互联......一起来看看 《支付革命》 这本书的介绍吧!

JSON 在线解析
JSON 在线解析

在线 JSON 格式化工具

在线进制转换器
在线进制转换器

各进制数互转换器

UNIX 时间戳转换
UNIX 时间戳转换

UNIX 时间戳转换