[代码样式]jQuery时间轴/时光轴插件jqtimeline

[代码样式]jQuery时间轴/时光轴插件jqtimeline

Facebook 的 Timeline 和 QQ空间的时光轴是很好的应用,它以一条直线的方式记录你的各种使用信息,能让你一目了然的知道你在什么时间干了什么事。如果你想创建类似的效果,jqtimeline 也许是个不错的选择。

jqtimeline 是一个简单的、轻量级的 jQuery 时间轴/时光轴插件,你可以用它来创建社交应用、博客的时间表以及社会岗位时间表等等。jqtimeline 的数据是 json 格式,可以很方便地于其他 jQuery 插件集成,你可以可以自己定义 CSS。

兼容性

jqtimeline 对 IE6 兼容欠佳,其他浏览器正常。

使用方法

引入文件

<link rel="stylesheet" href="https://www.dowebok.com/css/jquery.jqtimeline.css">
<script src="https://www.dowebok.com/js/jquery-1.9.1.min.js"></script>
<script src="https://www.dowebok.com/js/jquery.jqtimeline.js"></script>

HTML

<div id="longTimeLine"></div>

JavaScript

var ev = [{
    id: 1,
    name: "Android 1.0 发布,这是 Android 第一个版本。",
    on: new Date(2008, 9, 23)
},
{
    id: 2,
    name: "Android 1.5 发布,取名 Cupcake(纸杯蛋糕)。",
    on: new Date(2009, 4, 30)
},
{
    id: 3,
    name: "Android 1.6 发布,取名 Donut(甜甜圈),首次支持了 CDMA 网络。",
    on: new Date(2009, 9, 15)
},
{
    id: 4,
    name: "Android 2.0 发布,取名  Eclair(松饼)。",
    on: new Date(2009, 10, 26)
},
{
    id: 6,
    name: "Android 2.2 发布,取名 Froyo(冻酸奶)。",
    on: new Date(2010, 5, 20)
},
{
    id: 7,
    name: "Android 2.3 发布,取名 Gingerbread(姜饼)。",
    on: new Date(2010, 12, 7)
},
{
    id: 8,
    name: "Android 3.0 发布,取名 Honeycomb(蜂巢),专用于平板电脑。",
    on: new Date(2011, 2, 2)
},
{
    id: 9,
    name: "Android 3.1 发布,取名 Honeycomb(蜂巢)。",
    on: new Date(2011, 5, 11)
},
{
    id: 10,
    name: "Android 3.2 发布,取名 Honeycomb(蜂巢)。",
    on: new Date(2011, 7, 13)
},
{
    id: 11,
    name: "Android 4.0 发布,取名 Ice Cream Sandwich(冰激凌三明治)。",
    on: new Date(2011, 10, 19)
},
{
    id: 12,
    name: "Android 4.1 发布,取名 Jelly Bean(果冻豆)。",
    on: new Date(2012, 6, 28)
},
{
    id: 13,
    name: "Android 4.2 发布,取名 Jelly Bean(果冻豆)。",
    on: new Date(2012, 10, 30)
}];
$('#longTimeLine').jqtimeline({
    events: ev,
    numYears: 4,
    startYear: 2008,
    click: function(e, event) {
        loadPage(event);
    }
});

参数

参数 类型 说明 默认值
startYear 整数 开始的年份 [Current Year] – 1
numYears 整数 共显示多年 3
gap 整数 每个时间点之间的距离 25
showToolTip 布尔值 鼠标移到时间点显示提示信息 true
groupEventWithinPx
events 数组 事件对象的数组,显示在时间轴上。不要与 JavaScript 事件混淆
click 函数 点击时间点需要执行的函数
隐藏内容,您需要满足以下条件方可查看
End

人已赞赏
脚本代码

[代码样式]简单的jQuery导航菜单固定插件smint

2020-11-6 9:51:17

脚本代码

[代码样式]jQuery垂直滚动插件Totem

2020-11-6 9:51:20

下载说明

  • 1、微码盒所提供的压缩包若无特别说明,解压密码均为weimahe.com
  • 2、下载后文件若为压缩包格式,请安装7Z软件或者其它压缩软件进行解压;
  • 3、文件比较大的时候,建议使用下载工具进行下载,浏览器下载有时候会自动中断,导致下载错误;
  • 4、资源可能会由于内容问题被和谐,导致下载链接不可用,遇到此问题,请到文章页面进行反馈,以便微码盒及时进行更新;
  • 5、其他下载问题请自行搜索教程,这里不一一讲解。

站长声明

本站大部分下载资源收集于网络,只做学习和交流使用,版权归原作者所有;若为付费资源,请在下载后24小时之内自觉删除;若作商业用途,请到原网站购买;由于未及时购买和付费发生的侵权行为,与本站无关。本站发布的内容若侵犯到您的权益,请联系本站删除,我们将及时处理!
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索