超酷的JavaScript叙事性时间轴(Timeline)类库

Timeline - 超酷的JavaScript叙事性时间轴(Timeline)类库

在线演示

Timeline 是我见过的最酷的展示事件随时间发展的javascript实现。你可以基于时间使用讲故事的方式来创建时间轴特效，整个时间轴以幻灯的方式来展示，你可以穿插图片，视频或者是网站，而且拥有非常华丽的动画效果和缩略图效果，非常适合做网站的关于我们功能。

 

主要特性

  • 支持外部社交网站，例如，twitter.com， youtube，flickr，vidmeo，Google Maps 
  • 开源免费
  • 文档齐全
  • 使用简单
  • 支持数据格式：JSON，Google Doc，HTML

如何使用

插入javascript类库 

 

Html代码  收藏代码
  1. <!-- CSS -->    
  2. nk href="timeline.css" rel="stylesheet">    
  3. <!-- JavaScript -->    
  4. <script type="text/javascript" src="jquery-min.js"></script>    
  5. <script type="text/javascript" src="timeline-min.js"></script>    

 

添加生成timeline的div

Html代码  收藏代码
  1. <div id="timeline"></div>    

  

初始化timeline

 

Js代码  收藏代码
  1. <script>    
  2. $(document).ready(function() {    
  3.    var timeline = new VMM.Timeline();    
  4.    timeline.init("your_data.json");    
  5. });    
  6. </script>  

 

搞定！

基本代码如下：

 

Html代码  收藏代码
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4.    <title>Timeline - Kitchen Sink</title>  
  5.    <!-- CSS -->  
  6.    <link href="http://veritetimeline.appspot.com/latest/timeline.css" rel="stylesheet">  
  7.    <!-- JavaScript -->  
  8.    <script type="text/javascript" src="http://veritetimeline.appspot.com/latest/jquery-min.js"></script>  
  9.    <script type="text/javascript" src="http://veritetimeline.appspot.com/latest/timeline-min.js"></script>  
  10.    <script type="text/javascript">  
  11.    $(document).ready(function() {  
  12.       var timeline = new VMM.Timeline();  
  13.       timeline.init("http://veritetimeline.appspot.com/latest/examples/kitchen-sink.json");  
  14.    });  
  15.    </script>  
  16. </head>  
  17. <body>  
  18.    <div id="timeline"></div>  
  19. </body>  
  20. </html>  
posted @ 2014-07-07 15:32  super1234  阅读(3958)  评论(0)  编辑  收藏  举报