twitter ■お問い合わせ当サイトへのリンクサイト仕様

現在位置 > LostTechnology > JavaScript > me Marquee

me Marquee

このJavaScriptは2001年3月に発売された著書「わたしにもできる動くホームページ」に収録したものです。Internet Explorer 4の頃に作成したものであるため、そのうちjQuery用にしてもっとシンプルな実装で作成するかもしれません。

指定した要素を左右どちらかにスクロールさせるためのDynamicHTML(DOM+JavaScript)です。Internet ExplorerのMARQUEE要素と同じような効果です。

現状ではBODYの横幅でスクロールします。

Sample

これは右から左へ…
こちらは左から右へ…
<div><span id="r2l" style="position:relative;">これは右から左へ…</span></div>

ID名は自由ですが、スクリプトの実行時に必ず指定したID名を使用してください。スタイルシートで画面右の外に表示しておき、オブジェクトを左もしくは右へスクロールさせます。

必ずposition:relativeの指定が必要となります。親要素にもposition:relativeを指定しておいてください。なお、動かしたいオブジェクトは必ずDIV要素かSPAN要素にしなければなりません。画像などはDIV要素に入れてください。

<SCRIPT type="text/javascript" src="script/memarquee.js"></SCRIPT>

ここからスクリプトをファイルに保存して、<HEAD>~</HEAD>内に記述してスクリプトを読み込ませます。

<BODY onload="meMarqueeX('r2l',10,3);">

スクリプトは<BODY>のonload属性で実行します。最初のパラメータが指定したID名で、2番目のパラメータが処理タイミング(ミリ秒)、3番目のパラメータが1回あたりの移動ピクセル数です。移動ピクセル数を負数(マイナス)にすると右へ移動するようになります。