- ベストアンサー
オンマウスで流れる文字の表現方法
- オンマウスで文字が流れる効果を実現する方法について知りたいです。具体的には、リンクにマウスを乗せると文字列が左に流れるような仕掛けをPCサイトで表現したいです。
- 現在、検索しているものの、どのような方法が適切なのかわかりません。JavaScriptに詳しくないため、特定の要件を満たす方法が見つからない状況です。
- 試したい方法として、<marquee>タグを使用してみましたが、文字列が右から左に流れるだけで、マウスを乗せると左に流れるような効果を実現することができませんでした。このような動きを実現する方法を知りたいです。
- mfrogs
- お礼率100% (26/26)
- JavaScript
- 回答数4
- ありがとう数4
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
#3です。 ＞「左端まで移動したら消えたままになると解釈してみた。」 ＞とあるのですが、マウスオーバーしたままにしておいた状態で ＞もしも左端まで移動したら、また頭から再生されるという表現も可能なのでしょうか？ 可能です。 スクリプトの終わりの方の if(indent>wide) s.textIndent = indent + "px"; else { clearInterval(id); id = null; } を、 if(wide>indent) indent = t.clientWidth; s.textIndent = indent + "px"; に入替えてあげればよろしいかと… 前回作成が適当だったので、やっぱり漏れがありました。 .marqueeのCSSで white-space:nowrap; を忘れていました。 （これがないと、右方から表示される時に、div要素などの場合に折返し表示されてしまう）
その他の回答 (3)
- fujillin
- ベストアンサー率61% (1594/2576)
ブロック的な感じでよいのかなぁ。 なんとなく、インライン的に使いたいのかなという印象を（勝手に）持ちましたが… すでに回答があるみたいですし、適当に作ってみただけなのでご参考までに。 *速度はintervalの数値、またはindentの増減分で調整可能です *class="marquee"の要素を対象としています （全角空白は半角に） <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="ja"> <head><title>sample</title> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <style type="text/css"> .marquee { display: inline-block; vertical-align: text-top; overflow: hidden; color: #800; background-color: #ffe; } .L1 { width: 20em; height:1em; } .L2 { width: 10em; height:1em; } </style> <script type="text/javascript"> <!-- /*@cc_on@*/ document./*@if(1)attachEvent('on' + @else@*/addEventListener(/*@end@*/ 'mouseover', test, false); function test(evt){ if(this.interval_id) clearInterval(this.interval_id); this.interval_id = null; var t = evt./*@if(1)srcElement @else@*/target/*@end@*/; if(!(/\bmarquee\b/.test(t.className))) return; var id, interval = 10; var s = t.style, wide, width, indent, disp; width = s.width; indent = s.textIndent; disp = s.display; s.width = "auto"; s.textIndent = 0; s.display = "inline-block"; wide = -t.clientWidth; s.width = width; s.textIndent = indent; s.display = disp; id = setInterval(function(){ indent = parseInt(indent); indent = (indent?indent:0) - 1; if(indent>wide) s.textIndent = indent + "px"; else { clearInterval(id); id = null; } }, interval); this.interval_id = id; } //--> </script> </head> <body> <div style="width:800px; padding:5px;"> <p> 質問文の印象だと、 <span class="marquee L1"> 長い文章111。終了。 </span> 文章があって、文章の中にマーキーがあるのではないのだろうか？ （リストだと通常はページ幅になってしまいそうな・・・）<br> 一つの文の中に複数のものが、 <span class="marquee L1"> 長い文章222。終了。 </span> 連続してあったりはしないのだろうか？ </p> <p> 例えば <span class="marquee L2"> 長い文章333。終了。 </span> の後に <span class="marquee L2"> 長い文章444。終了。 </span> みたいに。 </p> <p> 左端まで移動したら消えたままになると解釈してみた。<br> <div class="marquee" style="width:100%"> 長い文章555。終了。 </div> </p> </div> </body> </html>
お礼
たびたびの回答を本当にありがとうございました。 とても助かります。
補足
回答ありがとうございます！ 早速ためしてみました！！ すごいです！見事にマウスオーバーで動き出しました＞＜ 「左端まで移動したら消えたままになると解釈してみた。」 とあるのですが、マウスオーバーしたままにしておいた状態で もしも左端まで移動したら、また頭から再生されるという表現も可能なのでしょうか？ 今、いただいた記述をはしからじっくりみて、 …頭からプスプス煙がでているところです。 なんでこんなにすらすらでてくるのですか…本当にすごいですね。
- hok212
- ベストアンサー率66% (100/150)
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で調べたところ、 いただいた記述でちゃんと動きました。
- axel_eye
- ベストアンサー率64% (145/226)
これでどうでしょう？ <Marquee scrollamount="0" truespeed onmouseover="this.setAttribute('scrollamount',3,0);" onmouseout="this.setAttribute('scrollamount',0,0);">message<!--s--></Marquee> 私、JavaScript知らないんで、scrollamount,3,0の後ろの0が何を意味するかわからない のですけど。
お礼
回答をありがとうございます！ 早速ためしました！！ 数日さがしまくってたので、ストップしてる文字列が マウスオーバーで流れ出したときは感涙でした。 ブラウザ気にせずに…と質問には書いたのですが… 感動の勢いで下記環境で見てみました。 普段はmacの環境でして、いつも利用しているFirefoxは問題なく、 いろいろなブラウザで調べてみたところ、 オペラはだめで、safariがはじめは止まっていて マウスオーバーで動き出すまではいいのですがマウスアウトしたあと、 1mmづつ動くという惜しさでした。Windowsは調べられてませんがどうなのかしら…。 それでも、ほんとに方法が見つからず困ってたので、心より感謝いたします！！
お礼
本当にありがとうございました！ これを機会にジャバスクリプトの本を買ってきました。 いただいた回答とじっくり向き合ってみます。