一回も披露したことのない豆知識

オンマウスで流れる文字

解決済

  • 質問者：mfrogs
  • 質問日時：
  • 回答数：4件

「リンクがはってある文字列があり、マウスのポインタを
　リンクの上にもっていく(onmouseover、a:hover状態)と文字列が左に流れる」
という仕掛けをしたいのですが、方法がわかりません。
携帯でいうところの(au限定)「<div style="white-space:nowrap">オンマウスで文字が流れます</div>(参考サイト…http://htmlcssdesign.no-mania.com/Entry/3/)」状態をPCサイトで表現したいです。

ブラウザが限定されも良いので何か方法はないでしょうか？

たとえば、
「<marquee onmouseout=this.stop() onmouseover=this.start()>～</marquee>」を指定しておいて、ページ読み込み時に全Marqueeをストップさせるとか考えたのですが、
恥ずかしながらJavaScriptがあまり詳しくなく、かなり検索してますが
「全Marqueeをストップさせる」方法自体がどうしてもわかりません。
第一「Marquee」ですと、枠の一番右から始まってしまい
「すでに文字列が表示されていて、
　マウスを上にもっていくとそのまま左に動き出す」
という形になりません。

「動いてる文字列を止める」というのは沢山見つかるのですが、
「止まっている文字列を動かす」が全くみつかりません。

《html》
<div id="box">
<ul>
<li><a href="#">長ーーい文章。長い文章。長い文章。長い文章の終了。</a></li>
<li><a href="#">長ーーい文章2。長い文章。長い文章。長い文章の終了。</a></li>
<li><a href="#">長ーーい文章3。長い文章。長い文章。長い文章の終了。</a></li>
<li><a href="#">長ーーい文章4。長い文章。長い文章。長い文章の終了。</a></li>
<li><a href="#">長ーーい文章5。長い文章。長い文章。長い文章の終了。</a></li>
</ul>
</div>


《CSS》
*{marign:0; padding:0;}

div#box{
width:200px;
overflow:hidden;
}


div#box li{
white-space:nowrap
}

===
上記でいうと、リンクのはられてる文字列「長ーーい…長い文章の終了。」の上に
マウスをもっていくとすこしずつ左に流れ始めるイメージです。
何卒よろしくお願い致します。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (4件)

No.4ベストアンサー

  • 回答者： fujillin
  • 回答日時：

#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要素などの場合に折返し表示されてしまう）
    • good
    • 0
    • 件
通報する
この回答へのお礼

本当にありがとうございました！
これを機会にジャバスクリプトの本を買ってきました。
いただいた回答とじっくり向き合ってみます。

通報する
お礼日時：2011/06/22 15:25

No.3

  • 回答者： fujillin
  • 回答日時：

ブロック的な感じでよいのかなぁ。


なんとなく、インライン的に使いたいのかなという印象を（勝手に）持ちましたが…

すでに回答があるみたいですし、適当に作ってみただけなのでご参考までに。
*速度は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>

この回答への補足

回答ありがとうございます！
早速ためしてみました！！
すごいです！見事にマウスオーバーで動き出しました＞＜

「左端まで移動したら消えたままになると解釈してみた。」
とあるのですが、マウスオーバーしたままにしておいた状態で
もしも左端まで移動したら、また頭から再生されるという表現も可能なのでしょうか？

今、いただいた記述をはしからじっくりみて、
…頭からプスプス煙がでているところです。
なんでこんなにすらすらでてくるのですか…本当にすごいですね。

補足日時：2011/03/23 20:21
通報する
    • good
    • 0
    • 件
通報する
この回答へのお礼

たびたびの回答を本当にありがとうございました。
とても助かります。

通報する
お礼日時：2011/06/22 15:37

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で調べたところ、
いただいた記述でちゃんと動きました。

補足日時：2011/03/23 19:49
通報する
    • good
    • 0
    • 件
通報する
この回答へのお礼

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

通報する
お礼日時：2011/06/22 15:35

No.1

  • 回答者： axel_eye
  • 回答日時：

これでどうでしょう？



<Marquee scrollamount="0" truespeed onmouseover="this.setAttribute('scrollamount',3,0);" onmouseout="this.setAttribute('scrollamount',0,0);">message<!--s--></Marquee>

私、JavaScript知らないんで、scrollamount,3,0の後ろの0が何を意味するかわからない
のですけど。
    • good
    • 0
    • 件
通報する
この回答へのお礼

回答をありがとうございます！
早速ためしました！！
数日さがしまくってたので、ストップしてる文字列が
マウスオーバーで流れ出したときは感涙でした。

ブラウザ気にせずに…と質問には書いたのですが…
感動の勢いで下記環境で見てみました。

普段はmacの環境でして、いつも利用しているFirefoxは問題なく、
いろいろなブラウザで調べてみたところ、
オペラはだめで、safariがはじめは止まっていて
マウスオーバーで動き出すまではいいのですがマウスアウトしたあと、
1mmづつ動くという惜しさでした。Windowsは調べられてませんがどうなのかしら…。
それでも、ほんとに方法が見つからず困ってたので、心より感謝いたします！！

通報する
お礼日時：2011/03/23 19:26

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報