[代码样式]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" rel="external nofollow" >
<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);
    }
});

参数

百度网盘" name="jQuery时间轴/时光轴插件jqtimeline" pass="" code=""]