オンマウスで流れる文字の表現方法

質問

• オンマウスで文字が流れる効果を実現する方法について知りたいです。具体的には、リンクにマウスを乗せると文字列が左に流れるような仕掛けをPCサイトで表現したいです。
• 現在、検索しているものの、どのような方法が適切なのかわかりません。JavaScriptに詳しくないため、特定の要件を満たす方法が見つからない状況です。
• 試したい方法として、<marquee>タグを使用してみましたが、文字列が右から左に流れるだけで、マウスを乗せると左に流れるような効果を実現することができませんでした。このような動きを実現する方法を知りたいです。

回答No.2

hok212

JavaScript＋CSSでやるのなら、こんな感じでしょうか。

<style type="text/css">
#obox { width:300px; border:1px solid #000; white-space:nowrap; overflow:hidden; }
#ibox { margin:5px; }
</style>

<script type="text/javascript">
xpos = 0;
function startScroll() {
xpos = xpos - 1;
xposValue = xpos + "px";
document.getElementById("ibox").style.marginLeft = xposValue;
scroller = setTimeout("startScroll()",10);
}
function stopScroll() {
clearTimeout(scroller);
}
</script>

<div id="obox">
<div id="ibox" onmouseover="startScroll()" onmouseout="stopScroll()">長文</div>
</div>

簡単に使い方の説明をすると、
<script>ブロックの「-1」を -2 や -5 などにすることで速度が速くなります。単位はピクセルです。
あるいはsetTimeoutの第2引数「10」を 20 や50 などにすることでも速度を調整できます。こちらの単位はミリ秒です。

なお、IE8、Firefox3.6、Chrome10、Safari5.0（すべてWin7） での動作は確認しました。

お礼

詳しく回答をありがとうございました！
勉強になりました。

補足

あまりに理想に近く感動に震えました！
そして…欲がでてきてしまいました…。

【1】マウスをはなすと文字が元の位置になる

【2】マウスをのせている間、marqueeのように最後の文章までいっても
　　 最初の所にもどり、何度も文字が流れる
　　※さらにできれば、初めと終わりの文字の間はスペース1文字分くらいだと最高!!

までできたら完璧に理想が叶いまして、
いただいた記述を何度も見返し四苦八苦、下記のようにして
なんとか【1】は表現できるようになりました。

<script type="text/javascript">
xpos = 0;
function startScroll() {
xpos = xpos - 1;
xposValue = xpos + "px";
document.getElementById("ibox").style.marginLeft = xposValue;
scroller = setTimeout("startScroll()",10);
}
function stopScroll() {
xpos = 0;
xposValue = xpos + "px";
document.getElementById("ibox").style.marginLeft = xposValue;
clearTimeout(scroller);
}
</script>

しかし、マウスオーバー中にずっと文字列を流すというのがどうしても難しく、
もし何かご存じでしたらご教示いただけないでしょうか…。

ちなみに、私の環境はMac OS 10.4でして、
Opera・Safari・Firefoxで調べたところ、
いただいた記述でちゃんと動きました。