超酷的JavaScript叙事性时间轴(Timeline)类库
Timeline 是我见过的最酷的展示事件随时间发展的javascript实现。你可以基于时间使用讲故事的方式来创建时间轴特效，整个时间轴以幻灯的方式来展示，你可以穿插图片，视频或者是网站，而且拥有非常华丽的动画效果和缩略图效果，非常适合做网站的关于我们功能。
主要特性
- 支持外部社交网站，例如，twitter.com， youtube，flickr，vidmeo，Google Maps
- 开源免费
- 文档齐全
- 使用简单
- 支持数据格式：JSON，Google Doc，HTML
如何使用
插入javascript类库
- <!-- CSS -->
- nk href="timeline.css" rel="stylesheet">
- <!-- JavaScript -->
- <script type="text/javascript" src="jquery-min.js"></script>
- <script type="text/javascript" src="timeline-min.js"></script>
添加生成timeline的div
- <div id="timeline"></div>
初始化timeline
- <script>
- $(document).ready(function() {
- var timeline = new VMM.Timeline();
- timeline.init("your_data.json");
- });
- </script>
搞定！
基本代码如下：
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <title>Timeline - Kitchen Sink</title>
- <!-- CSS -->
- <link href="http://veritetimeline.appspot.com/latest/timeline.css" rel="stylesheet">
- <!-- JavaScript -->
- <script type="text/javascript" src="http://veritetimeline.appspot.com/latest/jquery-min.js"></script>
- <script type="text/javascript" src="http://veritetimeline.appspot.com/latest/timeline-min.js"></script>
- <script type="text/javascript">
- $(document).ready(function() {
- var timeline = new VMM.Timeline();
- timeline.init("http://veritetimeline.appspot.com/latest/examples/kitchen-sink.json");
- });
- </script>
- </head>
- <body>
- <div id="timeline"></div>
- </body>
- </html>
超酷的JavaScript叙事性时间轴(Timeline)类库的更多相关文章
- 时间轴 timeline
时间轴 timeline https://www.helloweba.net/javascript/285.html https://www.helloweba.net/demo/v_timeline ...
- echarts使用结合时间轴timeline动态刷新案例
1.echarts简介 ECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Fire ...
- Alamofire源码解读系列(十二)之时间轴(Timeline)
本篇带来Alamofire中关于Timeline的一些思路 前言 Timeline翻译后的意思是时间轴,可以表示一个事件从开始到结束的时间节点.时间轴的概念能够应用在很多地方,比如说微博的主页就是一个 ...
- 横向、纵向时间轴timeline系列
近期移动端项目用到了很多时间轴.纵向的.开始可以实现,但是不利于维护.整理下, 以作为备份留存学习参考.子元素的 标签的 :before实现圆点,:after实现边线border纵向时间轴,单一右边内 ...
- SharePoint 中时间轴 Timeline的实现
客户需要在OA中实现每日动态功能,能够记录每一位员工的每天的工作动态,我很快想到了时间轴,因为时间轴能很直观的现实员工每一刻的动态.就像Facebook的Timeline效果(点击查看). 尝试着搜索 ...
- JQuery时间轴timeline插件的学习-Lateral On-Scroll Sliding with jQuery+technotarek / timeliner
一.Lateral On-Scroll Sliding with jQuery的使用 View demo Download source 1. HTML结构 <div id=" ...
- Android 时间轴TimeLine
代码:这里
- 超炫的时间轴jquery插件Timeline Portfolio
Timeline Portfolio是一款按时间顺序专业显示事件的jquery时间轴插件,可以根据时间的先后嵌入各种媒体包括微博,视频和地图等.这个展现的模式非常适合设计师的作品集和个人简历的展示.T ...
- Jquery实现超酷的时间轴特效
Timeline时间轴Jquery特效是一款现在互联网上非常流行的一种布局结构,结合了瀑布流布局,最近很多网友问到这种特效,网站上有网友们分享过一款,功能虽然实现,但样式不太好看,今天就把它整理出来分 ...
随机推荐
- DOSbox汇编集成环境下的具体设置
alt+enter能够全屏幕,假设认为游戏执行速度不合适,能够改动 cycles=3000 适当调整大小. .执行 DOSBox,会打开两个 DOS 窗体.我们仅仅需在例如以下窗体中键入 mount ...
- 【iOS开发-59】LOL案例：单组tabView、alertView样式、实现监听，以及用reloadData数据刷新
案例效果: (1)先在storyboard中拖拽出一个tableView,然后下面用代码. --tableView继承自scrollView.所以自然有滚动的特性 --最基本的还是数据转模型.以及对c ...
- Linux Samba安装与使用
一 安装环境: 虚拟机:RedHat 5.4 192.168.75.128 主机环境:WIN7 32bit 192.168.75.1 网络连接方式:NAT 二 安装步骤: 说明: Ø samb ...
- ASP.NET Core Kestrel 随机404错误
一.Bug 出现 最近遇到一个很诡异的bug,Visual Studio 2017调试ASP.NET Core 2.2 Web程序的时候,随机性的出现404错误.如下图 事实上这个css文件是存在的, ...
- VMware Workstation的网络连接方式:NAT、桥接和Host Only
安装完VMware Workstation后会自动生成两个网络连接:VMware Network Adapter VMnet8 和 VMware Network Adapter VMnet1(通常称为 ...
- MySQL数据库字符集由utf8修改为utf8mb4一例
对于mysql 5.5 而言,如果不设定字符集,mysql默认的字符集是 latin1 拉丁文字符集: 为了统一管理和应用开发的方便,一般都会统一将操作系统,客户端,数据库各方面的字符集都设置为 ut ...
- C# 动态生成word文档 [C#学习笔记3]关于Main(string[ ] args)中args命令行参数 实现DataTables搜索框查询结果高亮显示 二维码神器QRCoder Asp.net MVC 中 CodeFirst 开发模式实例
C# 动态生成word文档 本文以一个简单的小例子,简述利用C#语言开发word表格相关的知识,仅供学习分享使用,如有不足之处,还请指正. 在工程中引用word的动态库 在项目中,点击项目名称右键-- ...
- TCP/IP 端口大全
1 tcpmux TCP 端口服务多路复用 5 rje 远程作业入口 7 echo Echo 服务 9 discard 用于连接测试的空服务 11 systat 用于列举连接了的端口的系统状态 13 ...
- 解决Enter键与input 、a标签触发的事件的冲突
无论是 <button type="button" onclick="console.log('123');">123</button> ...
- effactive java读书小结1
java程序设计的原则 1 清晰性和原则性最为重要:模块:任何可重用的软件组件,从单个方法到复杂系统都可以是一个模块.代码应该被重用而不是被拷贝.模块之间的依赖性应该降到最小:错误应尽早检查出来,最好 ...