![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?5a7ff87)
下記のようなタグで、オンマウスでフェードイン、離れればフェードアウトの設定にしたいのですが、文字が隠れた状態が初期表示にする場合はどうしたらいいんでしょうか??
簡単なことかもしれないですが、どなたか教えてください。
<SCRIPT LANGUAGE="JavaScript">
<!--
//
itv = 100; //
cnt = 0;
function strFade(str) {
c = str.charAt(cnt++);
document.all["ID"].style.color = "#"+c+c+c+c+c+c;
if(cnt < str.length) setTimeout("strFade('" + str + "')",itv);
if(cnt == str.length) cnt = 0;
}
//-->
</SCRIPT>
</head>
<BODY>
<SPAN id="ID"><span onmouseover="strFade('fedcba9876543210')" onmouseout="strFade('0123456789abcdef')">m</SPAN><BR><BR>
</BODY>
No.2ベストアンサー
- 回答日時:
一応出来るんですが、面倒です(=-=;
具体的には
前文字のみの"a"文字と全体文字"amm"を用意し、
(1)起動時に"amm"を非表示にする。
(2)"a"のイベントの際に、"a"文字を非表示に変更。"amm"文字を表示状態に変更
(3)イベント終了時に、"amm"文字を非表示に変更。"a"文字を表示状態に変更
のような事を行います。
面倒ですが、"a"と"mm"で分けて処理をするやり方をすると、
"a mm"みたいな隙間が出来てしまうため、表示非表示の切り替えをしています。
(例)
<html>
<SCRIPT LANGUAGE="JavaScript">
<!--
//
itv = 100; //
cnt = 0;
function strFade(str) {
c = str.charAt(cnt++);
document.all["ID"].style.color = "#"+c+c+c+c+c+c;
if(cnt < str.length) setTimeout("strFade('" + str + "')",itv);
if(cnt == str.length) {cnt = 0;document.all["ID2"].style.display="inline";document.all["ID"].style.display="none";}
else {document.all["ID2"].style.display="none"; document.all["ID"].style.display="inline";}
}
function init()
{
document.all["ID"].style.color = "#ffffff";
}
//-->
</SCRIPT>
</head>
<BODY onload="init();">
<SPAN id="ID2" style="display:inline”><span onmouseover="strFade('fedcba9876543210')" onmouseout="strFade('0123456789abcdef')">a</SPAN>
<SPAN id="ID" style="display:none”><span onmouseover="strFade('fedcba9876543210')" onmouseout="strFade('0123456789abcdef')">amm</SPAN><BR><BR>
</BODY>
</html>
No.1
- 回答日時:
文字色を初めから白くするのでしたら、
<font>属性で囲って色付けしちゃうか。
(例)
<font color='#ffffff'>
<SPAN .......>
</font>
初期動作時にフォント色を付けるコードを書く
(例)
<BODY onload='init();'>
function init()
{
document.all["ID"].style.color = "#ffffff";
}
お好きな方をどうぞ。
背景色が白以外なら、それに合わせて色コード変えてくださいね。
できました!!すごい!!
めっちゃ分かりやすかったです☆
ありがとうございます!!!
ほんと感謝します!!!
すみません、もう一つなんですが、
たとえば、文字の部分が「amm」だったとして
初期画面ではaだけ表示され
フェードインするとammになり
フェードアウトするとaだけ残る
といったことはできるのでしょうか?
本当にありがとうございました!!!!!
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript 画像の表示位置 3 2022/12/23 08:25
- JavaScript 以前の質問だと、どの条件でも配列が表示されてしまいます。 1 2022/07/09 11:40
- HTML・CSS アコーディオンメニューが思うように動作しません。 1 2023/08/20 16:48
- JavaScript switch文のswitch(n)の部分を複数の値にするか、if文に変えてほしいです。 1 2022/07/27 17:18
- C言語・C++・C# C言語の質問です HTMLでこのようなコードを書いたのですがそれをC言語で同じように書きたいです < 1 2022/08/11 23:38
- Excel(エクセル) PHPプログラムをエクセルに張り付けると検索ボックスがでてくる! 3 2022/05/08 07:10
- JavaScript セレクトを全て選択されていないと、文字によるエラーメッセージを表示させるコードを調べています 2 2023/06/22 15:48
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- HTML・CSS CSS のみのタブ切り替えについて 1 2023/01/11 16:47
- HTML・CSS 下にスクロールしても、追従するボタンのコードを書いたのですが、ボタンの中の画像が半分しか表示されない 1 2022/04/16 21:31
関連するカテゴリからQ&Aを探す
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
MAX関数を使ってからLEFT JOIN...
-
読み込んだQRコードをフォーム...
-
javascriptテキストBOX色を元に...
-
console.log結果をhtmlで表示し...
-
HTMLタグに複数のクラスを設定...
-
jqueryを使って無駄なspanタグ...
-
getElementByIdの戻り値がnull...
-
createElementで作成した要素を...
-
「リンクにマウスオーバーする...
-
jQueryを使ってランダムに表示
-
jQueryでシンプルドラッグドロ...
-
バッチファイルでカウントアッ...
-
【HTML5】【canvas】【js】...
-
複数のリンク画像を一定時間で...
-
jQueryで同じid属性が複数あっ...
-
外部ページからハッシュタグ(...
-
jQueryのアコーディオンメニュ...
-
ボタンを押せば、画面が切り替...
-
テキストエリア内の一部の文字...
-
計算結果の表示方法について
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
MAX関数を使ってからLEFT JOIN...
-
javascriptテキストBOX色を元に...
-
読み込んだQRコードをフォーム...
-
createElementで作成した要素を...
-
removeEventListenerについて
-
クリックで色変更後に既に変更...
-
iframe内のリンクが飛ばないの...
-
[急ぎ] videoタグで埋め込んだm...
-
背景色を透明化
-
console.log結果をhtmlで表示し...
-
表示・非表示のスクリプトで、...
-
getElementByIdの戻り値がnull...
-
removeAttribute()メソッドで削...
-
テキストエリア内の一部の文字...
-
タブで開いてさらにタブ内をア...
-
IFRAMEの表示/非表示を切り替え...
-
変数内容をHTML内で表示する方法
-
HTMLタグに複数のクラスを設定...
-
jQueryのアコーディオンメニュ...
-
取得した要素がインライン要素...
おすすめ情報