文字をスクロールさせる方法とループごとに違うメッセージを表示する方法
- 文字を下から上にスクロールさせる方法と、特定の範囲でスクロールする方法について教えてください。
- また、スクロールがループになっている場合、ループごとに異なるメッセージを表示する方法も知りたいです。
- 具体的なプログラムの例も教えてください。
- ベストアンサー
文字をスクロールさせる
過去の質問で探しはしたのですが、良い解答が見つかりませんでした。 文字を下から上にスクロールさせたいんですが、ちょっと変わってます。質問は二つです。 １：スクロールする範囲を指定したい。 ２：スクロールはループになっているのだが、ループごとに違うメッセージにしたい。 の二つです。今のところプログラムは <html> <head> <title><title> <script Language="JavaScript"> <!--------------------------- function Tscroll() { y -= 2; document.all["whatNew"].style.top = y; if (y == 100) { setTimeout('Tscroll()',1500); } else if (y > 76) setTimeout('Tscroll()',100); else { //文字書換 y = 124; setTimeout('Tscroll()',100); } return true; } function Tbase() { cnt = 0; y = 124; setTimeout('Tscroll()',100); return true; } //---------------------------------> </script> </head> <body onLoad="Tbase()"> <script Language="JavaScript"> <!--------------------------- st = "ニャぁニャぁ"; document.write("<div id = 'whatNew' style = 'position:absolute;top:124px;'>"); document.write(""+st+""); document.write("</div>"); //---------------------------------> </script> </body> </html> 最終的なイメージとしては、一行幅の枠(実際に枠を作るわけではない)の中で 文字が、下から上にスクロールし、一行枠に文字がきちんとおさまったら 一旦停止。その後上へ消えていく。 すると今度は下から別の文字が来て同じような事を繰り返す。 せめて、divの書き換えの方法や属性等がわかれば、自分でどうにかできると思うんですが・・・
- akira212
- お礼率84% (95/112)
- JavaScript
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
質問の内容をきちんと把握できているかわかりませんが、以下のようなソースではいかがでしょうか。 <html> <head> <title></title> <script Language="JavaScript"> <!-- function Tscroll(){ y -= 2; if (document.all){ document.all["whatNew"].style.top = y; } else if(document.getElementById){ document.getElementById("whatNew").style.top = y+"px"; } if (y == 0){ setTimeout('Tscroll()',1500); } else if (y > -30) { setTimeout('Tscroll()',100); } else { if (st0==st){ st="わんわん";} else { st=st0;} if (document.all){ document.all["whatNew"].innerHTML=st; } else if(document.getElementById){ document.getElementById("whatNew").innerHTML=st; } y = 24; setTimeout('Tscroll()',100); } return true; } function Tbase() { cnt = 0; y = 24; setTimeout('Tscroll()',100); return true; } //--> </script> </head> <body onLoad="Tbase()"> <div style="height: 1em; overflow: hidden;"> <div id='whatNew' style='position: relative; top: 24px;'> <script Language="JavaScript"> <!-- st = "ニャぁニャぁ"; st0= st; document.write(st); //--> </script> </div></div> </body> </html> 枠を作成するのは、「<div style="height: 1em; overflow: hidden;"></div>」この部分で、高さ1emに制限したボックスを作り、はみ出す部分はoverflow: hidden;で隠すように、スタイルシートで指定しています。 その中で、次の要素をposition: relative;に設定して、表示位置を相対的に設定するように指定しています。 また、テキストの書き換えについては、innerHTMLプロパティを書き換えることで行っています。 IEのDHTMLでは、document.all["ID"].innerHTMLで、DOMではdocument.getElementById("ID").innerHTMLで、特定の要素の中身を書き換えられます。 なお、余計なお世話ではありますが、ちょっと手を加えてNetscape 6以降でも動くようにしてあります。 多分、Opera 7.11でも動いてくれるでしょう。 参考になれば… 見当違いでしたら、ごめんなさい。
関連するQ&A
- 文字を一文字ずつ表示
JavaScriptで文字を一文字ずつ表示するサンプルを見つけ、使おうとしたところdocument.allが使われていた為、ネスケで対応できない事が分かりました。ネスケ4.7で対応するようにするにはどのように変えたらいいのか教えて頂きたく宜しくお願いいたします。 <SCRIPT Language="JavaScript"> <!-- var msg="Welcome!!"; i=0; function Start(){ if(i<=msg.length){ if(document.all){ myText.innerHTML = msg.substring(0,i); }else if(document.layers){ document.myText.document.open(); document.myText.document.write(msg.substring(0,i)); document.myText.document.close(); } i=++i; setTimeout("Start()",200); }else{ i=0; setTimeout("Start()",1000); } } // --> </SCRIPT> </HEAD> <BODY onLoad="Start()"> <DIV id="myText"></DIV> </BODY> 宜しくお願い致します。
- ベストアンサー
- JavaScript
- 自動的にスクロールするようにするには
文章が自動的にスクロールするようにしたいので本を見ながらやってみたらできたのですが・・・ 下がる速度が思ってたほど遅いです。個人的にはもっと高速で下に下がって欲しいのですが超低速で下がっていきます。どうすれば早くなるか教えてください。それともこれ以上早くは下がってくれないとか？ <html> <body> <head> <title></title> </head> <body> <script language="javascript"> <!-- count = 0; var timerlD; function Scroll(){ count += 1; if( count < 600) { scroll(0, count ); } else{ cleartimeout( timerlD ); count = 0; return; } timerlD = setTimeout( "Scroll()", 1 ); } //--> </script> ここに自動的にスクロールする文章を打ってます。 gooに投稿できる文字数の関係で消しました。 <!--最後にスクロールON! --> <script language="javascript"> Scroll(); </script> </body> </html>
- ベストアンサー
- JavaScript
- マウスでページを横スクロールさせる方法
縦方向にスクロールさせることはできましたが横スクロールの方法がどうしてもわかりません。 縦スクロールのやり方も下のスクリプトより簡素化できますでしょうか？ <HTML> <HEAD> <SCRIPT LANGUAGE="JavaScript"> function mScroll(){ scrollTo (0,(document.body.scrollHeight-document.body.clientHeight)*event.y/document.body.clientHeight); } </SCRIPT> </HEAD> <BODY onmousemove="mScroll()"> </BODY> </HTML>
- ベストアンサー
- JavaScript
- スクロールしても画像・文字がついてくる
教えて!goo内にて、スクロールしても画像もしくは、文字がついてくるJavascriptのコードが下記のようにありました。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html><head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <script type="text/javascript"> function F1() { v='.pixelTop=';dS='';sD='.style';y='document.body.scrollTop';} function F2() { obj='obj1';yy=eval(y);eval(dS+obj+sD+v+yy);setTimeout('F2()',10);} </script> </head> <body onload="F1();F2();"> <div id='obj1' style='position:absolute;left:0px; top:0px;'> ここが動きます。 </div> <script type="text/javascript"> for(var i=0;i<100;i++){document.write('<br>')} </script> </body> </html> そこで質問なのですが、DOCTYPEを下記のように変更すると動作しなくなったのですが、この原因が調べてもわかりませんでしたので、どなたか原因がわかる方教えていただけませんでしょうか？ 使用ブラウザは、IE6 です。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> ↓ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
- ベストアンサー
- JavaScript
- スクロールの時間調節
初めて投稿します。 よろしくお願いします。 下記のような ソースで テキストのスクロールをしようと思いますが スクロールの早さの調節をしたい場合どうしたらよいのでしょう？ プログラムには詳しくないので すぐに使える状態で教えていただけませんか？ <SCRIPT language=JavaScript> <!-- var count,max,timer function init(){ count=0 max=(document.all?document.body.scrollHeight:document.height?document.height:1000) autoScroll() } function autoScroll() { if(navigator.appVersion.charAt(0)>=3) { if(count<max) { window.scroll(0,count++); timer=setTimeout("autoScroll()",4); } } } //--> </SCRIPT> <BODY onload=init()>
- 締切済み
- JavaScript
- 文字列を点滅させたい
JavaScriptを勉強しているのですが、文字を点滅させたいので下記の様なプログラム作成したのですがELSE文に絡む事ができません。 どうして動作しないのか？わからず投稿しました。 どうすればよいのでしょうか？ 宜しくお願い致します。 <script language="JavaScript" type="text/javascript"> <!-- var flg=1; function test() { if (flg==1) { document.write("元気？"); flg=0; }else{ document.write(""); flg=1; } setTimeout("test()",2000); } // --> </script> <BODY onLoad="test()"></BODY>
- ベストアンサー
- JavaScript
- このタグの文字サイズを大きくしたいのですが、、、
<head> <title>１文字づつ画面上に出力する</title> <script language="JavaScript"><!-- str = "Sample text...(^^)/ By KaZuhiro FuRuhata"; count = 0; function setText1() { if (count > str.length) return; count++; txt = str.substring(0,count); if (document.all) document.all["outText"].innerHTML = txt; if (document.layers) { document.layers["outText"].document.open(); document.layers["outText"].document.write(txt); document.layers["outText"].document.close(); } setTimeout("setText1()",100); } // --></script> </head> <body> <a href="javaScript:setText1()">出力開始</a> <div id="outText" style="position:absolute;top:50px;left:5px;"></div> </body>
- ベストアンサー
- その他（インターネット・Webサービス）
- overflowを使ってのスクロール
CSSのoverflowを使って、ページの一部をスクロールさせたいのですが 完全に下までスクロールができません。 具体的には以下のソースの"div2"をスクロールさせたく、overflowのauto を使っているのですが、一番下までスクロールができません。 どのようにしたらよいか、ご指摘お願いいたします。 HTMLのソースは以下の通りです。 このままコピペしてもらえば動作を確認してもらえると思います。 どうかよろしくお願いいたします。 <html> <head> <style type="text/css"> body { overflow: hidden; } div { border: 1px solid black; } #div2 { height: 100%; overflow: auto; } </style> </head> <body> <div id="div1"></div><br> <div id="div2"></div> </body> <script type="text/javascript"> var text = ""; for (var i=0; i<10; i++) text += "aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br>"; document.getElementById('div1').innerHTML = text; for (var i=0; i<150; i++) text += "aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br>"; document.getElementById('div2').innerHTML = 'BEGIN<br>' + text + 'END'; </script> </html>
- ベストアンサー
- CSS
- このタグで文字の大きさを変えたいのですが、、、、
<head> <title>文字色をリアルタイムに変える</title> <script Language="JavaScript"><!-- count = 0; function changeColor(str) { txt = document.all["strID"].innerText; c = str.charAt(count); txt = txt.fontcolor("#"+c+c+"0000"); document.all["strID"].innerHTML = txt; count++; if (count > str.length) count = 0; setTimeout("changeColor('"+str+"')",100); } // --></script> </head> <body onLoad="changeColor('0123456789abcdefedcba987654321')"> <div id="strID" style="font-weight:900">ここの文字の色が変わるよ～ん</div> </body>
- ベストアンサー
- HTML
- JavaScriptの文字表示速度
こんにちは。 JavaScriptの事でお聞きしたい事があります。 まではこれを見てください。 <SCRIPT language="JavaScript"> <!-- msg = "ここにメッセージを入力すると、途中から少しだけ早くなる"; stcnt = 0; wid =60; blnk = ""; for(i=0; i<wid; i++) blnk += " "; str = blnk + msg ; timeID = 10; function scroller() { document.guide.message.value = str.substring(stcnt++,stcnt+wid); if (stcnt>msg.length + wid) stcnt=0; clearTimeout(timeID); timeID = window.setTimeout("scroller()",100); } // --> </SCRIPT> -------------------- 文字を出したいところに <SCRIPT language="JavaScript"> <!----- document.write("<CENTER><FORM NAME='guide'>") document.write("<INPUT TYPE='text' NAME='message' SIZE=40></FORM></CENTER>") scroller(); // --> </SCRIPT> -------------- と張ります。 このスクリプトですが、htmlに張ると小さい文字表示の部分が出てきて 右から左にむかって文字が流れていきますが、途中から 文字の表示速度が速くなっています。 これてなぜか自分でもいろいろとやってみたのですが、いまいちよくわかりません。 説明をお願いできますでしょうか。 よろしくお願いします。
- 締切済み
- JavaScript
お礼
今ごろ気づいたのですが、お礼を言ってなかったですね。。。 すみません。 この通りでした！！本当にありがとうございました。