![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?e8efa67)
「リンクがはってある文字列があり、マウスのポインタを
リンクの上にもっていく(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
}
===
上記でいうと、リンクのはられてる文字列「長ーーい…長い文章の終了。」の上に
マウスをもっていくとすこしずつ左に流れ始めるイメージです。
何卒よろしくお願い致します。
No.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要素などの場合に折返し表示されてしまう)
No.3
- 回答日時:
ブロック的な感じでよいのかなぁ。
なんとなく、インライン的に使いたいのかなという印象を(勝手に)持ちましたが…
すでに回答があるみたいですし、適当に作ってみただけなのでご参考までに。
*速度は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>
この回答への補足
回答ありがとうございます!
早速ためしてみました!!
すごいです!見事にマウスオーバーで動き出しました><
「左端まで移動したら消えたままになると解釈してみた。」
とあるのですが、マウスオーバーしたままにしておいた状態で
もしも左端まで移動したら、また頭から再生されるという表現も可能なのでしょうか?
今、いただいた記述をはしからじっくりみて、
…頭からプスプス煙がでているところです。
なんでこんなにすらすらでてくるのですか…本当にすごいですね。
No.2
- 回答日時:
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で調べたところ、
いただいた記述でちゃんと動きました。
No.1
- 回答日時:
これでどうでしょう?
<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は調べられてませんがどうなのかしら…。
それでも、ほんとに方法が見つからず困ってたので、心より感謝いたします!!
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS HTMLのdlとul どちらが正しいと思いますか 3 2023/02/23 11:20
- HTML・CSS テキストを画面の真ん中に配置したいです。 2 2022/11/25 16:11
- PHP アコーディオンPHPが上手くいかない 3 2022/07/15 16:29
- HTML・CSS CSSがなぜかfont-sizeだけ効かない...記述がまちがっているんでしょうか 5 2022/04/09 17:52
- ビジネスマナー・ビジネス文書 管理組合・議案書内の理事長の挨拶文書について 1 2023/03/25 23:54
- 分譲マンション 管理組合・議案書内の理事長の挨拶文書作成にについて 2 2023/03/26 01:56
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- PHP PHPの構文で間違えが分からない 5 2022/07/11 16:38
- HTML・CSS 要素の幅をいろんな写真の幅に合わせたい。 1 2022/07/25 20:11
- HTML・CSS HTML & CSS 縦ボックス内の文字の左右センタリング 3 2023/03/25 04:23
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
MAX関数を使ってからLEFT JOIN...
-
前回の質問の続き
-
onclickとonmouseoverを同時に...
-
背景色を透明化
-
バッチファイルでカウントアッ...
-
createElementが一瞬で消えてし...
-
タブで開いてさらにタブ内をア...
-
JSで動的にリンクを作成
-
変数内容をHTML内で表示する方法
-
dblclickでdiv要素を一回だけ作...
-
表示・非表示のスクリプトで、...
-
読み込んだQRコードをフォーム...
-
javascriptテキストBOX色を元に...
-
removeEventListenerについて
-
自働生成される<div>タグに連番...
-
jQueryのアコーディオンメニュ...
-
クリックで色変更後に既に変更...
-
jQueryでシンプルドラッグドロ...
-
クリックするとテーブルの列の...
-
jQueryスライドショー画像への...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
MAX関数を使ってからLEFT JOIN...
-
javascriptテキストBOX色を元に...
-
createElementで作成した要素を...
-
読み込んだQRコードをフォーム...
-
console.log結果をhtmlで表示し...
-
iframe内のリンクが飛ばないの...
-
変数内容をHTML内で表示する方法
-
getElementByIdの戻り値がnull...
-
背景色を透明化
-
自働生成される<div>タグに連番...
-
複数のリンク画像を一定時間で...
-
クリックで色変更後に既に変更...
-
removeEventListenerについて
-
IFRAMEの表示/非表示を切り替え...
-
表示・非表示のスクリプトで、...
-
タブで開いてさらにタブ内をア...
-
Jquery 親要素で順番入れ替え
-
HTML id名とjavascript変数名
-
VBScriptでXMLのデータを取得す...
-
[急ぎ] videoタグで埋め込んだm...
おすすめ情報