- ベストアンサー
メッセージ表示で
javascriptを使ってHMTLの中に異なる文章をタイプライター風に 表示することは可能ですか？(１行だけでなく。) javascriptで、ステータスバーに異なる文章を流す方法は いろいろと見つけることができるのですが。 以前、どこかのＨＰで見かけたんですが、ＵＲＬを忘れてしまったので。 どなたか教えてください。お願いします。
- novaakira
- お礼率53% (55/103)
- JavaScript
- 回答数2
- ありがとう数1
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
これは可能です。 一応自分で作ったそれらしいものがあるので参考になれば・・・・ タイプライター以外にいろいろやってますが・・・・ ちなみに、変数の宣言部分でほとんどの値を変化させることが出来ます。 (IE5 と NN4.75 でテスト) <HTML> <HEAD> <SCRIPT language = "JavaScript"> <!-- /////////////////////////////////////////////////////////////////////////////////////////// var txtsrc = new Array(); var nowlen = 0; var nowgyo = 0; var mvcnt = 5; var timerID; var mouseon = false; var n_link = new Array(); var a_link = new Array(); var v_link = new Array(); var lback = new Array(); /////////////////////////////////////////////////////////////////////////////////////////// /////////////////////////////////////////////////////////////////////////////////////////// var mailto = "http://www.goo.ne.jp"; var mladd = "gooへ"; txtsrc[0] = "あいうえお"; txtsrc[1] = "かきくけこ"; txtsrc[2] = "さしすせそ"; txtsrc[3] = ""; txtsrc[4] = mladd; var timecnt = 150; // タイプライトの速度(1000で1秒、カウントごとに1文字タイプ) var charmc = 100; // 斜め移動の速度(1000で1秒、カウントごとに右下へ1pix移動) var fonsz = 7; // 文字サイズ(1～7) var shadown = fonsz / 2; // 影の初期位置 var shadowp = 60; // 影の移動量 var foncol = new String("0000FF"); // 文字の色 var fonsdw = new String("BBBBFF"); // 影の色 n_link[0] = 0; n_link[1] = 0; n_link[2] = 255; // LINK の文字色(各0～255 RGB順) a_link[0] = 0; a_link[1] = 0; a_link[2] = 255; // ALINK の文字色(各0～255 RGB順) v_link[0] = 0; v_link[1] = 0; v_link[2] = 255; // VLINK の文字色(各0～255 RGB順) lback[0] = 255; lback[1] = 255; lback[2] = 256; // リンクメッセージの背景色(各0～255 RGB順) // 1つでも255を越えると透過色 var lstr = "gooへ移動しま～す"; // リンクメッセージの文字列 var lfcl = ("00FF00"); // リンクメッセージの文字色 var lfsz = 7; // リンクメッセージの文字サイズ(1～7) var lx = 30; // リンクメッセージのX座標(マウスを基準に,px) var ly = 30; // リンクメッセージのY座標(マウスを基準に,px) /////////////////////////////////////////////////////////////////////////////////////////// /////////////////////////////////////////////////////////////////////////////////////////// var dummystr = "<FONT SIZE = " + fonsz + " COLOR = \'#" + foncol + "\'>"; var dummystr2 = "<FONT SIZE = " + fonsz + " COLOR = \'#" + fonsdw + "\'>"; var dummystr3 = "<FONT SIZE = " + fonsz + " COLOR = \'#" + foncol + "\'>"; var dummystr4 = "<FONT SIZE = " + fonsz + " COLOR = \'#" + fonsdw + "\'>"; var maxgyo = txtsrc.length; var mouseon = false; n_link[0] = (n_link[0] << 16) | (n_link[1] << 8) | n_link[2]; a_link[0] = (a_link[0] << 16) | (a_link[1] << 8) | a_link[2]; v_link[0] = (v_link[0] << 16) | (v_link[1] << 8) | v_link[2]; /////////////////////////////////////////////////////////////////////////////////////////// function mv(e){ // マウス移動時の処理用関数 // マウスがリンク上にある場合はポップアップレイヤーを表示する if (mouseon){ if (document.all){ document.all("layer3").style.top = event.offsetY + ly; document.all("layer3").style.left = event.offsetX + lx; document.all("layer3").style.visibility = "visible"; } else{ document.layer3.moveTo(e.pageX +lx, e.pageY + ly); document.layer3.visibility = "show"; } } } /////////////////////////////////////////////////////////////////////////////////////////// function m1(){ // マウスがリンクに重なったらポップアップレイヤーの表示を可能にする mouseon = true; } /////////////////////////////////////////////////////////////////////////////////////////// function m2(){ // マウスがリンクから離れたらポップアップレイヤーを隠す mouseon = false; if (document.all){ document.all("layer3").style.visibility = "hidden"; document.all("layer3").style.top = 1; document.all("layer3").style.left = 1; } else{ document.layer3.visibility = "hide"; } } /////////////////////////////////////////////////////////////////////////////////////////// function mvshadow(){ // 影移動関数 // 影を移動する if (mvcnt < (5 + shadowp)){ mvcnt++; if (document.all){ document.all("layer1").style.top = mvcnt + shadown; document.all("layer1").style.left = mvcnt + shadown; } else{ document.layer1.moveTo(mvcnt + shadown, mvcnt + shadown); } } // 影の移動終了後の処理 else{ clearInterval(timerID); // 本文と影をそれぞれリンク設定文字列とアンダーライン設定の文字列に置き換える if (document.all){ document.all("layer2").innerHTML = dummystr3; document.all("layer1").innerHTML = dummystr4; } else{ document.layer2.document.open(); document.layer2.document.write(dummystr3); document.layer2.document.close(); document.layer1.document.open(); document.layer1.document.write(dummystr4); document.layer1.document.close(); } // ポップアップレイヤーの準備 if (document.all){ document.all("layer3").style.visibility = "hidden"; document.all("layer3").innerHTML = "<FONT SIZE = " + lfsz + " COLOR = \'#" + lfcl + "\'>" + lstr + "</FONT>"; } else{ document.layer3.visibility = "hide"; document.layer3.document.open(); document.layer3.document.write("<FONT SIZE = " + lfsz + " COLOR = \'#" + lfcl + "\'>" + lstr + "</FONT>"); document.layer3.document.close(); document.captureEvents(Event.MOUSEMOVE); } // マウス移動時は mv 関数を呼び出す document.onmousemove = mv; } } /////////////////////////////////////////////////////////////////////////////////////////// function typewrite(){ // タイプライト関数 // 実際に表示する文字列を 1文字づつ抜き出して dummystr(本文用文字列) に格納 // 実際に表示する文字列を 1文字づつ抜き出して dummystr2(影用文字列) に格納 if (nowgyo < maxgyo){ if (nowlen < txtsrc[nowgyo].length){ dummystr += txtsrc[nowgyo].substr(nowlen, 1); dummystr2 += txtsrc[nowgyo].substr(nowlen, 1); nowlen++; } else{ nowlen = 0; nowgyo++; dummystr += "<BR>"; dummystr2 += "<BR>"; } // 抜き出した本文と影の文字列を書き出す if (document.all){ document.all("layer2").innerHTML = dummystr + "</FONT>"; document.all("layer1").innerHTML = dummystr2 + "</FONT>"; } else{ document.layer2.document.open(); document.layer2.document.write(dummystr + "</FONT>"); document.layer2.document.close(); document.layer1.document.open(); document.layer1.document.write(dummystr2 + "</FONT>"); document.layer1.document.close(); } } // 文字をすべて書き出し後の処理 else{ clearInterval(timerID); dummystr += "</FONT>"; dummystr2 += "</FONT>"; // 影移動関すの呼び出し timerID = setInterval("mvshadow()", charmc); } } /////////////////////////////////////////////////////////////////////////////////////////// function init(){ // 初期設定関数 // リンク色の設定 document.linkColor = n_link[0]; document.alinkColor = a_link[0]; document.vlinkColor = v_link[0]; // ポップアップレイヤーの背景色の設定 if ((lback[0] | lback[1] | lback[2]) <= 255){ if (document.all){ document.all("layer3").style.backgroundColor = ((lback[0] << 16) | (lback[1] << 8) | lback[2]); } else{ document.layer3.bgColor = ((lback[0] << 16) | (lback[1] << 8) | lback[2]); } } // 本文レイヤーと影レイヤーの初期位置へ移動 if (document.all){ document.all("layer1").style.left = 5 + shadown; document.all("layer1").style.top = 5 + shadown; document.all("layer2").style.left = 5; document.all("layer2").style.top = 5; } else{ document.layer1.moveTo(5 + shadown, 5 + shadown); document.layer2.moveTo(5, 5); } // 内部処理用に書き出す文字列を dummystr3 へリンクを設定して格納 // 内部処理用に書き出す文字列を dummystr4 へアンダーラインを設定して格納 for (cnt = 0; cnt < maxgyo; cnt++){ if (txtsrc[cnt] == mladd){ dummystr3 += "<A href = \'" + mailto + "\' onMouseOver = 'm1()' onMouseOut = 'm2()'>" + mladd + "</A>"; dummystr4 += "<U>" + mladd + "</U>"; } else{ dummystr3 += txtsrc[cnt]; dummystr4 += txtsrc[cnt]; } dummystr3 += "<BR>"; dummystr4 += "<BR>"; } dummystr3 += "</FONT>"; dummystr4 += "</FONT>"; // タイプライト関すの呼び出し timerID = setInterval("typewrite()", timecnt); } /////////////////////////////////////////////////////////////////////////////////////////// //--> </SCRIPT> </HEAD> <BODY> <NOBR> <DIV ID = "layer1" STYLE = "position:absolute"></DIV> <DIV ID = "layer2" STYLE = "position:absolute"></DIV> <DIV ID = "layer3" STYLE = "position:absolute"></DIV> </NOBR> <SCRIPT Language = "JavaScript"> <!-- /////////////////////////////////////////////////////////////////////////////////////////// init(); /////////////////////////////////////////////////////////////////////////////////////////// //--> </SCRIPT> </BODY> </HTML>
その他の回答 (1)
- xruz
- ベストアンサー率50% (72/143)
こんにちはnovaakiraさん、xruzです。 こんな感じでしょうか？（Ie5.5sp2で動作確認） <html> <head> <title></title> </head> <script language="JavaScript"> <!-- var s=new Array( "あいうえお", "かきくけこ", "さしすせそ" ); var tid; var wln=new Array(); function tp(j,i) { clearTimeout(tid); with(document.f) { if(i==0) t.value=wln[j][i++]; else t.value=t.value+wln[j][i++]; if(i>=wln[j].length) { i=0; j++; } if(j==s.length) { return ; } else { tid=setTimeout("tp("+eval(j)+","+eval(i)+")",500);} }} function st() { for(var j=0;j<s.length;j++) { var w=new Array(); for(var i=0;i<s[j].length;i++) w[i]=s[j].substring(i,i+1); wln[j]=w; } tid=setTimeout("tp(0,0)",500); } //--> </script> <body onLoad="st();"> <form method="post" name="f"> <input type="text" name="t" size="20"> </form> </body> </html> がんばってくださいね(~:~i
お礼
返事が遅くなってすみません。 テンパってました もう頭がチンプンカンプンで...... 配列ですか...... ちょっと僕の頭が配列を拒否してまして すみません。 ですが、確かに僕が実現したいようになってますね。 ただ、一度全てを表示した後、終了してしまいますね。 どーしたら良いものか。 ほんとに回答ありがとうございました。
補足
早い回答ありがとうございます。 レイヤーを使っての表示ですね。しかも表示した文字に影までつけて。 この表示の仕方も使わせていただきますが、今回、僕がやりたい事は、 “あいうえお”とタイプライター風に書いた後に、“あいうえお”を 消して、“かきくけこ”と表示したいのです。(同じ行に) var mes1="○○○"; var mes2="△△△"; var mes3="×××"; var mes=mes1+mes2+mes3; . . . として、テキストボックス内で表示させてみたのですが これだと○○○△△△×××と続けて書かれてしまうので....。 どうにかなりませんか？