「それ JavaScript でできるよ」とか言いながら、良いサンプルを見つけられなかったので自分で書いた。

• 横スクロールのみ実装。上下スクロールや入れ子 *1 は面倒だからやらない。
• 簡単・便利
• マークアップ構造をできるだけ変更しない。
• オブジェクト指向

new Mraquee( id, opt )
    

id

スクロールさせる block 要素の ID

opt

オプション(hash)

amount

移動量(px) 負の値なら左から右にスクロール。デフォルトで 6

delay

移動頻度(ms) デフォルトで 100

1. シンプル

   ソース

   
   <div id="m1" style="width:100%;border:red solid 1px;">これは JavaScript で書いています。</div>
   <script type="text/javascript">new Marquee('m1');</script>
       

   結果

   これは JavaScript で書いています。

2. オプション付き

   ソース

   
   <div id="m2" style="width:50%;border:red solid 1px;">逆向き<br>少し速い</div>
   <script type="text/javascript">new Marquee('m2',{amount:-6,delay:50});</script></li>
       

   結果

   逆向き
   少し速い

3. 止めたり出来ます

   ソース

   
   <div id="m3" style="width:400px;border:red solid 1px;">止められます</div>
   <div><button id="m3toggle">止める</button></div>
   <script type="text/javascript">
   var m = new Marquee('m3');
   var b = document.getElementById('m3toggle')
   b.onclick = function(){ 
       if ( m.isMarqueeing() ){
           m.stop();
           b.innerHTML = '始める';
       }
       else {
           m.start();
           b.innerHTML = '止める';
       }
   };
   </script>
       

   結果

   止められます

   止める

4. 背景画像

   ソース

   
   <div id="m5" style="width:200px;border:red solid 1px;background-image:url(slash.png)">
       <p style="float:right;border:red dotted 1px;">こんにちは。</p>
       <p>テストメッセージ。テストメッセージ。テストメッセージ。テストメッセージ。テストメッセージ。</p>
   </div>
   <script type="text/javascript">new Marquee('m5');</script>
       

   結果

   こんにちは。

   テストメッセージ。テストメッセージ。テストメッセージ。テストメッセージ。テストメッセージ。

   背景画像は http://lab.rails2u.com/bgmaker/ で作成しました。

5. 背景画像もスクロール

   ソース

   
   <div id="m6" style="width:100%;border:red solid 1px;">
       <div style="width:200px;background-image:url(slash.png)">
       背景画像も動きます。
       </div>
   </div>
   <script type="text/javascript">new Marquee('m6');</script>
       

   結果

   背景画像も動きます。

1. IE6 では Marquee 対象に width を設定しないとはみ出す。

   ソース

   
   <div id="e1" style="border:red solid 1px;">これは JavaScript で書いています。</div>
   <script type="text/javascript">new Marquee('e1');</script>
       

   結果

   これは JavaScript で書いています。

   (IE6以外の方へ)こんな風になります。

   これは JavaScript で書いています。

   参考

   Internet Explorer (Windows) CSSバグリスト - 幅と高さが明示されていない要素へのoverflow:hidden;指定が完全に反映されない
   http://cssbug.at.infoseek.co.jp/detail/winie/b068.html

2. Marquee 対象は「position:relative」になります。なので「position:absolute」などのブロック要素には適用できません。
   そうゆう時は「position:absolute」の中に Marquee 対象を置きます。

   
   <div style="position:absolute;top:10px;right:10px;width:100px;">
   <div id="e2" style="width:100%;border:red solid 1px;">in an absolute box.</div>
   <script type="text/javascript">new Marquee('e2');</script>
   </div>
       

   結果

   ページの右上のヤツです。

   in an absolute box.

3. Marquee 対象とその子要素の間に div を一枚噛ましています。なので CSS の子供セレクタなんかが効かなくなります。