zoukankan      html  css  js  c++  java

  • 超酷的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>  
  • 相关阅读:
    Unity3D中AssetBundle应用
    C++智能指针 auto_ptr、shared_ptr、weak_ptr和unique_ptr
    C++枚举类型Enum及C++11强枚举类型用法
    C++强制类型转换
    Git使用（二、分支的创建和上传）
    Git使用（一、TortoiseGit和Gitlab在Windows下的项目库创建和上传）
    UE4行为树
    软件光栅器实现（四、OBJ文件加载）
    软件光栅器实现（三、裁剪）
    软件光栅器实现（二、VS和PS的运作，法线贴图，切空间的计算）
  • 原文地址：https://www.cnblogs.com/xiaochao12345/p/3829805.html
Copyright © 2011-2022 走看看