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

时间：2022-09-17 16:22:17

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

在线演示

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源码解读系列&lpar;十二&rpar;之时间轴&lpar;Timeline&rpar;

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

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

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

  5. SharePoint 中时间轴 Timeline的实现

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

  6. JQuery时间轴timeline插件的学习-Lateral On-Scroll Sliding with jQuery&plus;technotarek &sol; timeliner

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

  7. Android 时间轴TimeLine

    代码:这里

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

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

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

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

随机推荐

  1. 有关big&period;LITTLE，你需要知道的十件事情

    来源 问题 1:该技术能够同时打开所有核心吗?   在早期的 big.LITTLE 软件模型中(集群迁移和 CPU 迁移),软件在核心之间切换,不能同时打开所有核心.在更新的软件模型“全局任务调度”中 ...

  2. WordPress前台后台页面打开慢的解决方法

    写个人网站用WordPress程序是一个不错的选择,但是目前安装之后速度很慢,后台配置页面半天打不开,在网上查了一下原来是Google被墙导致,WordPress默认模板会加载谷歌的open-sans ...

  3. java使用poi创建excel文件

    import org.apache.poi.hssf.usermodel.HSSFCell;import org.apache.poi.hssf.usermodel.HSSFRow;import or ...

  4. Signalr 实现心跳包

    项目分析: 一个实时的IM坐席系统,客户端和坐席使用IM通信,客户端使用android和ios的app,坐席使用web. web端可以保留自己的登录状态,但为防止意外情况的发生(如浏览器异常关闭,断网 ...

  5. 学习笔记：GLSL Core Tutorial – Pipeline &lpar;OpenGL 3&period;2 – OpenGL 4&period;2&rpar;

    GLSL Core Tutorial – Pipeline (OpenGL 3.2 – OpenGL 4.2) GLSL 是一种管道,一种图形化的流水线 1.GLSL 的具体工作流程: 简化流程如下: ...

  6. Leetcode&lowbar;204&lowbar;Count Primes

    本文是在学习中的总结,欢迎转载但请注明出处:http://blog.csdn.net/pistolove/article/details/46366207 Description: Count the ...

  7. ExtJs Sencha Cmd创建项目以及编译项目

    一:创建项目 sencha sdk tool2.0无法创建api为sencha-touch-2.2.1的项目,需要使用SenchaCmd代替sencha sdk tool,其步骤如下: 1,下载安装s ...

  8. 【Tomcat】性能优化

    一.JVM优化 1.内存优化. 2.垃圾回收策略优化. 二.server.xml的connector优化(connector是与HTTP请求处理相关的容器,三个容器的初始化顺序为:Server-&gt ...

  9. Selenium2&lpar;WebDriver&rpar;总结&lpar;四&rpar;---基本元素操作

    WebDriver提供了常用的WEB控件的操作方法,比如:按钮.输入框.超链接等,废话不多说,直接上代码: import org.openqa.selenium.By; import org.open ...

  10. 升级Linux内核导致vmware无法使用（vmnet模块无法编译）解决方式

    近期将ubuntu升级到了14.04,出现了vmware无法启动的情况. 详细表现为:每次启动的时候都会弹出一个VMWare Kernel Module Updater的对话框,要求依据当前内核版本号 ...

相关文章