skuare.netはJavaScriptライブラリのjQuery,mootools,prototypeのプラグインを中心にWebサイト構築に関する技術を試す個人サイトです

タイムライン作成javascript「Timeline」

｜ ｜ ｜ ｜ ｜ ｜ ｜

年表などを作成するとき時系列で並べると便利ですが、長くなりすぎるとページに収まりません。
そこでTimelineを使用すると、ある一部分のみを表示することができます。

使用方法
Timelineからtimeline.jsをmootoolsからmootools（v1.2）をダウンロードします。
<script src="http://yourdomain/mootools.js" type="text/javascript"></script>
<script src="http://yourdomain/timeline.js" type="text/javascript"></script>
<link rel="stylesheet" href="http://yourdomain/timeline.css" style="text/css">
＊CSSの中で画像をしてしていますので、適宜変更してください。
18.png、scale.gif
最後にタイムラインを表示する場所に以下を記述します。
<script type="text/javascript">
var timeline;
window.addEvent('domready', function(){
timeline = new TimeLine('timeline');
});
</script>
<div id="timeline"></div>
またタイムラインに表示するにはtimeline.jsの88行目以下を変更します。
this.addTimeEvent('タイトル' , '内容' ,X ,Y );
＊まだ開発途中なのかラベルなどをつけられません。
タイムライン作成javascript「Timeline」サンプル

記事作成：2007年12月22日

前の記事：パノラマ写真を3Dで縮小表示するjavascript「3D Panorama」
次の記事：Appleライクなサイトを作るためのJavaScript 19+1