在线演示

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

主要特性

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

如何使用

插入javascript类库

  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

  1. <div id="timeline"></div>

初始化timeline

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

搞定！

基本代码如下：

  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>

超酷的JavaScript叙事性时间轴(Timeline)类库的更多相关文章

  1. 时间轴 timeline

    时间轴 timeline https://www.helloweba.net/javascript/285.html https://www.helloweba.net/demo/v_timeline ...

  2. echarts使用结合时间轴timeline动态刷新案例

    1.echarts简介 ECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Fire ...

  3. Alamofire源码解读系列(十二)之时间轴(Timeline)

    本篇带来Alamofire中关于Timeline的一些思路 前言 Timeline翻译后的意思是时间轴,可以表示一个事件从开始到结束的时间节点.时间轴的概念能够应用在很多地方,比如说微博的主页就是一个 ...

  4. 横向、纵向时间轴timeline系列

    近期移动端项目用到了很多时间轴.纵向的.开始可以实现,但是不利于维护.整理下, 以作为备份留存学习参考.子元素的 标签的 :before实现圆点,:after实现边线border纵向时间轴,单一右边内 ...

  5. SharePoint 中时间轴 Timeline的实现

    客户需要在OA中实现每日动态功能,能够记录每一位员工的每天的工作动态,我很快想到了时间轴,因为时间轴能很直观的现实员工每一刻的动态.就像Facebook的Timeline效果(点击查看). 尝试着搜索 ...

  6. JQuery时间轴timeline插件的学习-Lateral On-Scroll Sliding with jQuery+technotarek / timeliner

    一.Lateral On-Scroll Sliding with jQuery的使用 View demo      Download source 1. HTML结构 <div id=" ...

  7. Android 时间轴TimeLine

    代码:这里

  8. 超炫的时间轴jquery插件Timeline Portfolio

    Timeline Portfolio是一款按时间顺序专业显示事件的jquery时间轴插件,可以根据时间的先后嵌入各种媒体包括微博,视频和地图等.这个展现的模式非常适合设计师的作品集和个人简历的展示.T ...

  9. Jquery实现超酷的时间轴特效

    Timeline时间轴Jquery特效是一款现在互联网上非常流行的一种布局结构,结合了瀑布流布局,最近很多网友问到这种特效,网站上有网友们分享过一款,功能虽然实现,但样式不太好看,今天就把它整理出来分 ...

随机推荐

  1. Linux mkdir 如何递归创建目录？

    mkdir 如何递归创建目录? mkdir –vp 目录1/目录2/目录3   详细介绍: linux mkdir 命令用来创建指定的名称的目录,要求创建目录的用户在当前目录中具有写权限,并且指定的目 ...

  2. CentOS 6.5下二进制安装 MySQL 5.6

    CentOS 6.5 二进制安装MySQL 5.6 1:查看系统版本 [root@10-4-5-9 mysql]# cat /etc/redhat-release CentOS release 6.5 ...

  3. Learning English From Android Source Code:1

    英语在软件行业的重要作用不言自明,尤其是做国际项目和写国际软件,好的英语表达是项目顺利进行的必要条件.纵观眼下的IT行业.可以流利的与国外客户英文口语交流的程序猿占比并非非常高.要想去国际接轨,语言这 ...

  4. cpu_test

    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...

  5. eclipse中查看某个方法（函数）被谁调用

    用了好久一直不知道eclipse中怎样实现vs中查找全部引用的功能,今天最终发现了哈哈 选中要查找的方法名,右键->References->Workspace 能够定位到详细的调用位置,快 ...

  6. js处理url

    需求:用js获得url的电话号码和状态 针对url地址:http://www.deikang.com/index.php?tel=15811296111&status=1&id=100 ...

  7. Android成长之路-LayoutInflater和inflate的用法

    在这里用Tabhost的例子来说明: package cn.csdn.activity; import android.app.TabActivity; import android.os.Bundl ...

  8. Java Socket网络编程Client端详解

    此类实现客户端套接字(也可以就叫“套接字”).套接字是两台机器之间的通信端点. Socket client = new Socket(ip,port);//创建一个流套接字并将其连接到指定 IP 地址 ...

  9. C# 文件与路径操作

    OpenFileDialog private void btnOpenFileDialog_Click(object sender, EventArgs e) { OpenFileDialog ope ...

  10. SIM800L透传模式配置

    UART1_SendString("AT+CIPCLOSE=1"); //关闭连接 delay_ms(100); Second_AT_Command("AT+CIPSHU ...