位置: 编程技术 - 正文

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

编辑:rootadmin

推荐整理分享jQuery Timelinr实现垂直水平时间轴插件(附源码下载),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:,内容如对您有帮助,希望把文章链接给更多的朋友!

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

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

效果展示 源码下载

使用方法

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

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

HTML结构

该时间轴插件的基本HTML结构如下:

初始化插件

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

配置参数

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

orientation:时间轴的方向,可选值有:horizontal | vertical默认值为'horizontal'。containerDiv:时间轴容器DIV的ID选择器。默认为:'#timeline'。datesDiv:显示时间的容器的ID选择器。默认为:'#dates'。datesSelectedClass:当前选中时间的class。默认值为:'selected'。datesSpeed:时间轴的动画速度。值从-,或'slow','normal','fast'。默认值为:'normal'。issuesDiv:信息描述的DIV的ID选择器。默认为:'#issues'。issuesSelectedClass:当前选择的信息描述的DIV的class。默认值为:'selected'。issuesSpeed:信息描述的DIV的动画速度。值从-,或'slow','normal','fast'。默认值为:'fast'。issuesTransparency:信息描述的DIV的透明度。值0-1之间,默认值为0.2。issuesTransparencySpeed:透明度动画的速度。值从-之间,默认为。prevButton:向前按钮的ID选择器。默认为:'#prev'。nextButton:向后按钮的ID选择器。默认为:'#next'。arrowKeys:是否允许使用键盘来控制。默认为:false。startAt:开始的索引下标,默认为1。autoPlay:是否自动播放。默认为'false'。autoPlayDirection:自动播放的方向。可选值有:forward | backward。默认值为:'forward'。autoPlayPause:自动播放的间隔。整数值, = 1秒,默认为。jquery.timelinr.js时间轴插件的github地址为: Timelinr实现垂直水平时间轴插件的相关内容,希望对大家有所帮助!

使用jQuery判断Div是否在可视区域的方法 判断div是否可见 !DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""

实例讲解jquery中mouseleave和mouseout的区别 本文详细的介绍了关于jQuery中mouseleave和mouseout的区别,分享给大家供大家参考,具体内容如下很多人在使用jQuery实现鼠标悬停效果时,一般都会用到mouse

jQuery simplePage+AJAX plus分页插件用法实例 本文实例讲述了jQuerysimplePage+AJAXplus分页插件。分享给大家供大家参考,具体如下:!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""

本文链接地址:https://www.jiuchutong.com/biancheng/381968.html 转载请保留说明!

上一篇:jquery拖拽排序简单实现方法(效果增强版)(jquery拖拽流程布局)

下一篇:使用jQuery判断Div是否在可视区域的方法 判断div是否可见(jquery判断div是否为空)

免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

鄂ICP备2023003026号

网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

友情链接: 武汉网站建设 电脑维修 湖南楚通运网络