jQuery Timelinr实现垂直水平时间轴插件(附源码下载)


Posted in Javascript onFebruary 16, 2016

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

推荐阅读:之前分享过一款 jQuery实现企业发展简史时间轴特效源码 ,它的界面展示效果很不错。

jQuery Timelinr实现垂直水平时间轴插件(附源码下载)

效果展示       源码下载

使用方法

使用该时间轴插件需要在页面中引入jQuery和jquery.timelinr.js文件。

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

HTML结构

该时间轴插件的基本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>

初始化插件

在页面DOM元素加载完毕之后,可以通过下面的方法来初始化该时间轴插件。

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

配置参数

jquery.timelinr.js时间轴插件的配置参数有:

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。
jquery.timelinr.js时间轴插件的github地址为: https://github.com/juanbrujo/jQuery-Timelinr

以上所述是关于jQuery Timelinr实现垂直水平时间轴插件的相关内容,希望对大家有所帮助!

Javascript 相关文章推荐
JavaScript设置FieldSet展开与收缩
May 15 Javascript
js输出列表实现代码
Sep 12 Javascript
根据json字符串生成Html的一种方式
Jan 09 Javascript
bootstrap改变按钮加载状态
Dec 01 Javascript
微信小程序 表单Form实例详解(附源码)
Dec 22 Javascript
Vue.js 2.0窥探之Virtual DOM到底是什么?
Feb 10 Javascript
js 数字、字符串、布尔值的转换方法(必看)
Apr 07 Javascript
JS组件系列之MVVM组件构建自己的Vue组件
Apr 28 Javascript
vue项目中使用Hbuilder打包app 设置沉浸式状态栏的方法
Oct 22 Javascript
简谈创建React Component的几种方式
Jun 15 Javascript
javascript+Canvas实现画板功能
Jun 23 Javascript
基于JS实现操作成功之后自动跳转页面
Sep 25 Javascript
深入浅析AngularJS和DataModel
Feb 16 #Javascript
Javascript中的Prototype到底是什么
Feb 16 #Javascript
剖析Node.js异步编程中的回调与代码设计模式
Feb 16 #Javascript
使用Node.js处理前端代码文件的编码问题
Feb 16 #Javascript
让图片跳跃起来  javascript图片轮播特效
Feb 16 #Javascript
Node.js本地文件操作之文件拷贝与目录遍历的方法
Feb 16 #Javascript
详解Node.js包的工程目录与NPM包管理器的使用
Feb 16 #Javascript
You might like
PHP中__get()和__set()的用法实例详解
2013/06/04 PHP
php文件夹的创建与删除方法
2015/01/24 PHP
PHP读取CSV大文件导入数据库的实例
2017/07/24 PHP
使用PHP+Redis实现延迟任务,实现自动取消订单功能
2019/11/21 PHP
IE6不能修改NAME问题的解决方法
2010/09/03 Javascript
json原理分析及实例介绍
2012/11/29 Javascript
javascript闭包的高级使用方法实例
2013/07/04 Javascript
利用JS解决ie6不支持max-width,max-height问题的方法
2014/01/02 Javascript
jQuery判断div随滚动条滚动到一定位置后停止
2014/04/02 Javascript
js仿苹果iwatch外观的计时器代码分享
2015/08/26 Javascript
BootStrap的JS插件之轮播效果案例详解
2016/05/16 Javascript
WebPack基础知识详解
2017/01/16 Javascript
Vue中引入样式文件的方法
2017/08/18 Javascript
AngularJS实现注册表单验证功能
2017/10/16 Javascript
input type=file 选择图片并且实现预览效果的实例
2017/10/26 Javascript
mock.js实现模拟生成假数据功能示例
2019/01/15 Javascript
nodejs读取图片返回给浏览器显示
2019/07/25 NodeJs
关于layui 下拉列表的change事件详解
2019/09/20 Javascript
layer ui 导入文件之前传入数据的实例
2019/09/23 Javascript
JavaScript中数组去重的5种方法
2020/07/04 Javascript
[04:49]期待西雅图之战 2016国际邀请赛中国区预选赛WINGS战队赛后采访
2016/06/29 DOTA
[02:03]完美世界DOTA2联赛10月30日赛事集锦
2020/10/31 DOTA
Python单链表的简单实现方法
2014/09/23 Python
Python语法快速入门指南
2015/10/12 Python
Python正则表达式完全指南
2017/05/25 Python
python使用tkinter实现简单计算器
2018/01/30 Python
python 初始化一个定长的数组实例
2019/12/02 Python
python简单的三元一次方程求解实例
2020/04/02 Python
pygame实现弹球游戏
2020/04/14 Python
斯洛伐克家具和时尚装饰品购物网站:Butlers.sk
2019/09/08 全球购物
公司活动总结范文
2014/07/01 职场文书
2015年街道办事处工作总结
2015/05/22 职场文书
Redis延迟队列和分布式延迟队列的简答实现
2021/05/13 Redis
python关于集合的知识案例详解
2021/05/30 Python
浅谈JS的原型和原型链
2021/06/04 Javascript
MySQL中varchar和char类型的区别
2021/11/17 MySQL