TimelineJs 的使用及应用

最近做项目,需要展示一个事件的发展历程,于是用到了 TimelineJs 这个东西,效果还不错,于是拿出来与大家分享下!

  1. 先下载资源包,上面TimelineJs 已经提供了GitHub的源地址 https://github.com/NUKnightLab/TimelineJS
  2. 新建页面,引入相关的文件,然后初始化代码

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    <html>
    <head runat="server">
    <title>时间轴插件--展示</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
    <!-- HTML5 shim, for IE6-8 support of HTML elements-->
    <!--[if lt IE 9]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->

    </head>
    <body>
    <form id="form1" runat="server">
    <div>
    <div id="timeline-embed">
    </div>
    <script type="text/javascript" src="/js/storyjs-embed.js"></script>
    <script type="text/javascript">
    function InitTimeline() {
    createStoryJS({
    type: 'timeline',
    width: '100%',
    height: "100%",
    lang: 'zh-cn',
    source: 'example_json.json',
    embed_id: 'timeline-embed'
    });
    }
    InitTimeline();
    </script>

    </div>
    </form>
    </body>
    </html>
  3. 大功告成,可以查看效果了,哈哈(ps:一定要将对应的css和js文件放到指定的目录下,如果没有请参照下面这段代码初始化)

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    <div id="timeline-embed"></div>
    <script type="text/javascript">
    var timeline_config = {
    width: '100%',
    height: '600',
    source: 'path_to_json',//数据来源
    embed_id: 'timeline-embed',//初始化的DOM ID
    lang: 'zh-cn', //语言版本
    css: 'path_to_css/timeline.css', //css路径
    js: 'path_to_js/timeline-min.js' //js路径
    }
    </script>

    <script type="text/javascript" src="/js/storyjs-embed.js"></script>

最后来张效果图


下载地址:点击此处下载DEMO