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 相关文章推荐
JQuyer $.post 与 $.ajax 访问WCF ajax service 时的问题需要注意的地方
Sep 20 Javascript
js中array的sort()方法使用介绍
Feb 20 Javascript
JavaScript将XML转成JSON的方法
Mar 12 Javascript
jQuery继承extend用法详解
Oct 10 Javascript
基于javascript实现数字英文验证码
Jan 25 Javascript
微信小程序开发注意指南和优化实践(小结)
Jun 21 Javascript
用Vue.js方法创建模板并使用多个模板合成
Jun 28 Javascript
使用layui实现树形结构的方法
Sep 20 Javascript
p5.js临摹旋转爱心
Oct 23 Javascript
javascript实现异形滚动轮播
Nov 28 Javascript
解决vue elementUI 使用el-select 时 change事件的触发问题
Nov 17 Vue.js
jQuery使用hide()、toggle()函数实现相机品牌展示隐藏功能
Jan 29 jQuery
深入浅析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编程中字符串处理的5个技巧小结
2007/11/13 PHP
用js实现上传图片前的预览(TX的面试题)
2007/08/14 Javascript
jQuery)扩展jQuery系列之一 模拟alert,confirm(一)
2010/12/04 Javascript
jquery动态加载图片数据练习代码
2011/08/04 Javascript
来自国外的30个基于jquery的Web下拉菜单
2012/06/22 Javascript
jQuery快速上手:写jQuery与直接写JS的区别详细解析
2013/08/26 Javascript
将list转换为json失败的原因
2013/12/17 Javascript
详解JavaScript的策略模式编程
2015/06/24 Javascript
最简单的JavaScript图片轮播代码(两种方法)
2015/12/18 Javascript
JavaScript中点击事件的写法
2016/06/28 Javascript
学习Angular中作用域需要注意的坑
2016/08/17 Javascript
Javascript获取background属性中url的值
2016/10/17 Javascript
JS实现复制内容到剪贴板功能
2017/02/05 Javascript
javascript验证香港身份证的格式或真实性
2017/02/07 Javascript
AngularJS学习第二篇 AngularJS依赖注入
2017/02/13 Javascript
js中获取键盘按下键值event.keyCode、event.charCode和event.which的兼容性详解
2017/03/15 Javascript
JS实现自动轮播图效果(自适应屏幕宽度+手机触屏滑动)
2017/06/19 Javascript
js实现删除li标签一行内容
2019/04/16 Javascript
微信小程序获取用户信息并保存登录状态详解
2019/05/10 Javascript
layui 实现表格某一列显示图标
2019/09/19 Javascript
[01:08:48]LGD vs OG 2018国际邀请赛淘汰赛BO3 第三场 8.25
2018/08/29 DOTA
python实现在无须过多援引的情况下创建字典的方法
2014/09/25 Python
零基础写python爬虫之urllib2中的两个重要概念:Openers和Handlers
2014/11/05 Python
python中文分词教程之前向最大正向匹配算法详解
2017/11/02 Python
浅谈python爬虫使用Selenium模拟浏览器行为
2018/02/23 Python
python处理两种分隔符的数据集方法
2018/12/12 Python
Python 仅获取响应头, 不获取实体的实例
2019/08/21 Python
pytorch 实现在预训练模型的 input上增减通道
2020/01/06 Python
python 使用openpyxl读取excel数据
2021/02/18 Python
英国儿童家具专卖店:GLTC
2016/09/24 全球购物
英国历史最悠久的DJ设备供应商:DJ Finance、DJ Warehouse、The DJ Shop
2019/09/04 全球购物
Unix如何添加新的用户
2014/08/20 面试题
绩效管理实施方案
2014/03/19 职场文书
计算机实训报告总结
2014/11/05 职场文书
党员活动总结
2015/02/04 职场文书
导游词之无锡东林书院
2019/12/11 职场文书