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

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

使用方法
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.pngscale.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」サンプル

sponsors

「タイムライン作成javascript「Timeline」」をシェアする

記事作成:
記事URL:

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