超酷的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>
相关推荐
chenshuixian 2013-06-01
羽化大刀Chrome 2013-05-31
wutongyuq 2013-04-12
quanhaoH 2013-06-17
YoungForever 2013-04-04
周公周金桥 2020-09-06
zjuwangleicn 2020-09-04
hellowzm 2020-08-18
大象从不倒下 2020-07-31
AlisaClass 2020-07-19
尚衍亮 2020-06-12
淡风wisdon大大 2020-06-06
黎豆子 2020-05-07
hilary0 2020-05-04
zhanghao 2020-04-21
MaureenChen 2020-04-21
xingguanghai 2020-03-13