jQuery时间轴插件timeline.js
http://www.jq22.com/jquery-info13695
http://www.jq22.com/jquery-info13357
简要教程
timeline.js是一款jQuery时间轴幻灯片插件。通过timeline.js插件,你可以很容易的制作出水平或垂直时间轴效果,并可以像幻灯片一样前后切换时间点。
使用方法
在页面中引入jquery和timeline.min.js文件,以及样式文件timeline.min.css。
1
2
3
|
< link rel = "stylesheet" href = "dist/css/timeline.min.css" /> < script src = 'path/to/jquery.min.js' ></ script > < script src = 'path/to/timeline.min.js' ></ script > |
timeline.js时间轴的基本HTML结构如下: HTML结构
1
2
3
4
5
6
7
8
9
|
< div class = "timeline-container timeline-theme-1" > < div class = "timeline js-timeline" > < div data-time = "2017" > your content or markup </ div > < div data-time = "2016" > your content or markup </ div > < div data-time = "2015" > your content or markup </ div > < div data-time = "2014" > your content or markup </ div > < div data-time = "2013" > your content or markup </ div > </ div > </ div > |
在页面DOM元素加载完毕之后,可以通过Timeline()方法来初始化该时间轴插件。 初始化插件
1
|
$( '.js-timeline' ).Timeline(); |
timeline.js时间轴插件可用的配置参数有:
配置参数
参数 | 默认值 | 描述 |
mode | 'horizontal' | 水平或垂直时间轴:horizontal或vertical。 |
itemClass | 'timeline-item' | 时间轴项的class名称。 |
dotsClass | 'timeline-dots' | 时间轴日期容器的class名称。 |
startItem | 'first' | 初始化时显示的项。可选值:first、last、number。 |
dotsPosition | 'bottom' | 时间轴日期容器的位置。可选值:bottom、top。 |
activeClass | slide-active | 时间轴当前项和日期的class类。 |
prevClass | slide-prev | 时间轴前一个项和日期的class类。 |
nextClass | slide-next | 时间轴下一个项和日期的class类。 |
jQuery时间轴插件timeline.js的更多相关文章
- jQuery时间格式插件-moment.js的使用
jQuery时间格式插件-moment.js的使用 moment.js插件的使用,使用之前在页面引入对应的js文件: 详细的操作可见moment中文官网:http://momentjs.cn/ 日期格 ...
- 推荐5款实用的jQuery时间轴插件
1.使用CSS3和jQuery制作的水平时间轴 这是一个可以在PC和移动端表现非常棒的水平时间轴,它由上部水平滑块和下部时间点对应的内容区块,点击时间轴上的时间点,下部内容会滑动到对应的内容区块.使用 ...
- jQuery时间轴插件:jQuery Timelinr
前言 这是一款可用于展示历史和计划的时间轴插件,尤其比较适合一些网站展示发展历程.大事件等场景.该插件基于jQuery,可以滑动切换.水平和垂直滚动.支持键盘方向键.经过扩展后可以支持鼠标滚轮事件. ...
- jQ效果:jQuery时间轴插件jQuery Timelinr
前言 这是一款可用于展示历史和计划的时间轴插件,尤其比较适合一些网站展示发展历程.大事件等场景.该插件基于jQuery,可以滑动切换.水平和垂直滚动.支持键盘方向键.经过扩展后可以支持鼠标滚轮事件. ...
- JQuery+HTML5+CSS3制作时间轴插件,支持响应式布局
一.效果图预览 (图一) (图二) 附注说明: 图一是浏览器宽度像素大于560px下的展示效果,图二是在浏览器宽度像素小于560px下的展现效果.使用的是CSS3的Media Query(媒体查询)实 ...
- 看看我做的一款 时间轴 插件 timegliderJs
TimegliderJs 是一款基于jQuery的时间轴插件.完成后效果. 介绍 Timeglider JS是一个由javascript支持缩放,数据驱动的时间轴组件.非常适合显示项目历史,项目计划及 ...
- jquery时间轴幻灯展示源代码
查看效果:http://hovertree.com/texiao/jquery/75/ 源代码下载:http://hovertree.com/h/bjaf/8jlpc2wu.htm 效果图如下: 代码 ...
- 使用canvas编写时间轴插件
使用canvas编写时间轴插件 背景 项目中有一个视频广场的功能,需要一个时间轴类似视频播放中进度条功能一样显示录像情况,并且可以点击.拖动.放大缩小展示时间轴,获取到时间轴的某个时间.原来的时间轴是 ...
- 发展简史jQuery时间轴特效
发展简史jQuery时间轴特效.这是一款鼠标滚动到一定的高度动画显示企业发展时间轴特效.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div class="wr ...
随机推荐
- StringBuilder的常用方法
转自:https://www.cnblogs.com/jack-Leo/p/6684447.html 在程序开发过程中,我们常常碰到字符串连接的情况,方便和直接的方式是通过"+"符 ...
- jenkins针对不同的项目组对用户进行权限分配
因jenkins上存有de(开发).te(测试)等三个不同环境的项目,同时因为项目需求,需要对不同的开发及测试人员配置不同的jenkins权限,即以项目为单位,对不同人员进行不同权限配置,要求如下: ...
- oracle篇 之 组函数
一,常见组函数 1 . avg:求平均值,操作数值类型 2.sum:求和,操作数值类型 3.min:求最小值,操作任意类型 4.max:求最大值,操作任意类型 select avg(salary),s ...
- 【UOJ448】【集训队作业2018】人类的本质 min_25筛
题目大意 给你 \(n,m\),求 \[ \sum_{i=1}^n\sum_{x_1,x_2,\ldots,x_m=1}^i\operatorname{lcm}(\gcd(i,x_1),\gcd(i, ...
- 基于VUE框架 与 其他框架间的基本对比
基于VUE框架的基本描述 与 其他框架间的基本对比 2018-11-03 11:01:14 A B React React 和 Vue 有许多相似之处,它们都有: 使用 Virtual DOM 提供 ...
- [十二省联考2019]异或粽子(堆+可持久化Trie)
前置芝士:可持久化Trie & 堆 类似于超级钢琴,我们用堆维护一个四元组\((st, l, r, pos)\)表示以\(st\)为起点,终点在\([l, r]\)内,里面的最大值的位置为\( ...
- (转)Java结束线程的三种方法
背景:面试过程中问到结束线程的方法和线程池shutdown shutdownnow区别以及底层的实现,当时答的并不好. Java结束线程的三种方法 线程属于一次性消耗品,在执行完run()方法之后线程 ...
- 浅议极大似然估计(MLE)背后的思想原理
1. 概率思想与归纳思想 0x1:归纳推理思想 所谓归纳推理思想,即是由某类事物的部分对象具有某些特征,推出该类事物的全部对象都具有这些特征的推理.抽象地来说,由个别事实概括出一般结论的推理称为归纳推 ...
- beego学习2 控制器与路由
beego控制器 controller目录新建test.go文件 结构体集成beego.Controller 控制名需大写,否则为私有方法 package controllers import ( & ...
- CMake快速入门
参考: https://www.hahack.com/codes/cmake/ 1. 单目标文件 main.c #include <stdio.h> #include <stdlib ...