• ベストアンサー

雪が降るようなスクリプト

<html> <head> <title>*****</title> <script language="JavaScript"> <!-- function MM_preloadImages() { 以下略 } //--> </script> </head> <body bgcolor=onLoad="MM_preloadImages('images/pic.gif', 以下略)"> 以下略 </body> </html> もともと、上の様なHTMLファイルがあり、そこに雪が降っているようなJavaScriptを入れたいんです。 その雪が降るJavaScriptの以下のサンプルは、Web上で見つけました。 ***** <script type="text/javascript"> <!-- sx = new Array(); sy = new Array(); sp = new Array(); num = 30; //降らせる雪の数 scrnx = 600; //雪の降る範囲：横 scrny = 400; //雪の降る範囲：縦 function snow() { styl = "<img src='snow.gif' style='position:absolute;width:8px;height:8px;top:"; for (i=0; i<num; i++) { sx[i] = Math.floor(Math.random()*600); sy[i] = Math.floor(Math.random()*400); sp[i] = Math.floor(Math.random()*5) + 1; document.write(styl+sy[i]+"px;left:"+sx[i]+"px;' name='snow"+i+"'>"); }} function move() { for (i=0; i<num; i++) { sy[i] += sp[i]; if (sy[i] > scrny) sy[i] = -10; document.images["snow"+i].style.top = sy[i]; }} // --> </script> </head> <body bgcolor="#000000" onLoad="setInterval('move()',100)"> <script type="text/javascript"> <!-- snow(); // --> </script> ***** 例えばもともとOnLoadというスクリプトがあるのですが、そこに別の（雪の）OnLoadはどのように記述したらいいのでしょうか。そういうことが分からないので、haed部分と、body部分に雪の降るスクリプトをどのように入れ込んだらいいのか分からないので教えてください。

noname#5355
noname#5355

質問者が選んだベストアンサー

  • ベストアンサー
noname#199778
noname#199778
回答No.4

こんにちは。 再び失礼します。 テーブル内に降る範囲を限定するのは少々難しいものを組まなければならないと思いますが、とりあえずウィンドウ中央の指定範囲内に限って画像を降らせるようにする方法は比較的簡単にできると思います。 範囲の限定方法については先の方も回答されていますが、以下は、そちらとはちょっと違う方法です。 <html> <head> <title>*****</title> <script language="JavaScript"> <!-- function MM_preloadImages() { 以下略 } sx = new Array(); sy = new Array(); sp = new Array(); num = 30; //降らせる雪の数 scrnx = 600; //雪の降る範囲：横(画面中央のdivの横幅) scrny = 400; //雪の降る範囲：縦 function snow() { styl = "<img src='snow.gif' style='position: relative; width: 8px; height: 8px; top:"; for (i=0; i<num; i++) { sx[i] = Math.floor(Math.random()*(scrnx-8))-i*8; sy[i] = Math.floor(Math.random()*scrny); sp[i] = Math.floor(Math.random()*5) + 1; document.write(styl+sy[i]+"px;left:"+sx[i]+"px;' name='snow"+i+"'>"); } } function move() { for (i=0; i<num; i++) { sy[i] += sp[i]; if (sy[i] > scrny) sy[i] = -10; document.images["snow"+i].style.top = sy[i]+"px"; }} // --> </script> </head> <body bgcolor="#000000" onLoad="MM_preloadImages('images/pic.gif', 以下略);setInterval('move()',100)"> <div style="text-align: center;"> <div style="width: 600px; height: 0; margin: auto; overflow: visible; text-align: left;"> <script type="text/javascript"> <!-- snow(); // --> </script> </div> </div> </body> </html> こちらの方法は、div要素を使って、snow()関数で書き出されるimg要素を囲い、降る範囲を限定しています。 img要素はスタイルシート指定をposition: relative;に置き換えることで、絶対位置ではなく、親要素との相対位置での配置を設定するように改造してあります。 <div style="text-align: center;"> <div style="width: 600px; height: 0; margin: auto; overflow: visible; text-align: left;"> とscript要素を囲むdiv要素を二重にしているのは、IEの旧バージョン(後方互換モード)対策で、親側のdiv要素でtext-align: center;の指定をして、内側のdiv要素をセンタリングしています(旧バージョンや後方互換モードのIEでは、これで中のブロック要素がセンタリングされます)。 内側のdiv要素では、text-align: left;で親のdiv要素のスタイルシートの継承を防ぎ、margin: auto;でこれをセンタリングするようにもしてあります(W3C準拠のスタイルシートが適用されれば、これでセンタリングされます)。 なお、この部分は、上にあるように、bodyの開始タグのすぐ下に配置するのが良いと思います。 このdiv要素はスタイルシートでの配置を独立させていないので、多少表示枠を確保するかもしれません。 こちらのソースでは、ウィンドウサイズを中途で変更されても、雪の降る範囲はウィンドウサイズに追従してセンタリングされると思います。 一応、WindowMe上のIE6、Netscape7.1、Opera7.11で動作することを確認してあります。 参考になれば。

noname#5355
質問者

お礼

再度ご回答ありがとうございました。 とても詳しく説明いただき、感謝いたします。 お礼が遅くなってしまいまして申しわけありませんでした。 動作確認までしていただいて、お手間かけました。 MacのIEで確認するとウィンドウサイズを変えたときに範囲が変わりませんでしたが、考え方やスクリプトは参考にさせていただきました。 ありがとうございました。

その他の回答 (3)

  • gimmick
  • ベストアンサー率49% (134/270)
回答No.3

ページを開いた時のウィンドウサイズに合わせて中央に表示します。ブラウザ依存の処理が入っていますが、最近のIEとNetspapeなら多分大丈夫だと思います。 function snow() { var width = 600; var height = 400; if (navigator.appName == "Microsoft Internet Explorer") { scrnx_min = document.body.clientWidth / 2 - width / 2; scrnx_max = document.body.clientWidth / 2 + width / 2;300; scrny_min = document.body.clientHeight / 2 - height / 2; scrny_max = document.body.clientHeight / 2 + height / 2; } else if (navigator.appName == "Netscape") { scrnx_min = window.body.innerWidth / 2 - width / 2; scrnx_max = window.body.innerWidth / 2 + width / 2; scrny_min = window.body.innerHeight / 2 - height / 2; scrny_max = window.body.innerHeight / 2 + height / 2; } styl = "<img src='snow.gif' style='position:absolute;width:8px;height:8px;top:"; for (i=0; i<num; i++) { sx[i] = Math.floor(Math.random()*(scrnx_max - scrnx_min)) + scrnx_min; sy[i] = Math.floor(Math.random()*(scrny_max - scrny_min)) + scrny_min; sp[i] = Math.floor(Math.random()*5) + 1; document.write(styl+sy[i]+"px;left:"+sx[i]+"px;' name='snow"+i+"'>"); } } #ページ表示中にウィンドウサイズを変えた場合、f5等で更新しないと中央に表示されません。

noname#5355
質問者

お礼

お礼遅くなってすみません。 再度ご回答ありがとうございました。 自分にJavaScriptの知識がほとんどなく、教えていただいても理解してアレンジするのがとても難しかったです。 出来れば画面トップから振り出すのではなく、画面中央のテーブル内で降らせたかったので、プログラマーに少し書き換えてもらいました。 参考にさせていただきました。 ありがとうございます。

  • gimmick
  • ベストアンサー率49% (134/270)
回答No.2

表示範囲を指定できるように改造しました。 scrnx_min、scrnx_max、scrny_min、scrny_maxを修正してください。 <head> <title>*****</title> <script language="JavaScript"> <!-- function MM_preloadImages() { } sx = new Array(); sy = new Array(); sp = new Array(); num = 30; //降らせる雪の数 scrnx_min = 200; //雪の降る範囲：横(左端) scrnx_max = 600; //雪の降る範囲：横(右端) scrny_min = 200; //雪の降る範囲：縦(上端) scrny_max = 400; //雪の降る範囲：縦(下端) function snow() { styl = "<img src='snow.gif' style='position:absolute;width:8px;height:8px;top:"; for (i=0; i<num; i++) { sx[i] = Math.floor(Math.random()*(scrnx_max - scrnx_min)) + scrnx_min; sy[i] = Math.floor(Math.random()*(scrny_max - scrny_min)) + scrny_min; sp[i] = Math.floor(Math.random()*5) + 1; document.write(styl+sy[i]+"px;left:"+sx[i]+"px;' name='snow"+i+"'>"); }} function move() { for (i=0; i<num; i++) { sy[i] += sp[i]; if (sy[i] < scrny_min || scrny_max < sy[i]) sy[i] = scrny_min; document.images["snow"+i].style.top = sy[i]; }} // --> </script> </head>

noname#5355
質問者

お礼

gimmikさん、ご回答ありがとうございます。 範囲指定についてですが、ユーザーの環境によりブラウザウィンドウの大きさが変わってくるので、今回は使用できません。 環境によらず常にセンターの600pxの範囲内に雪を降らせることはできないでしょうか。 このスクリプトじゃなくてもいいので、方法があれば教えていただきたいです。 よろしくお願いいたします。

noname#199778
noname#199778
回答No.1

二つのソースを単純に組み合わせてみました。 これで動くのではないでしょうか。 <html> <head> <title>*****</title> <script language="JavaScript"> <!-- function MM_preloadImages() { 以下略 } sx = new Array(); sy = new Array(); sp = new Array(); num = 30; //降らせる雪の数 scrnx = 600; //雪の降る範囲：横 scrny = 400; //雪の降る範囲：縦 function snow() { styl = "<img src='snow.gif' style='position:absolute;width:8px;height:8px;top:"; for (i=0; i<num; i++) { sx[i] = Math.floor(Math.random()*600); sy[i] = Math.floor(Math.random()*400); sp[i] = Math.floor(Math.random()*5) + 1; document.write(styl+sy[i]+"px;left:"+sx[i]+"px;' name='snow"+i+"'>"); }} function move() { for (i=0; i<num; i++) { sy[i] += sp[i]; if (sy[i] > scrny) sy[i] = -10; document.images["snow"+i].style.top = sy[i]; }} // --> </script> </head> <body bgcolor="#000000" onLoad="MM_preloadImages('images/pic.gif', 以下略); setInterval('move()',100)"> <script type="text/javascript"> <!-- snow(); // --> </script> </body> </html> イベントハンドラの中は、普通にスクリプトを組むのと同じ記述ができます。 この場合、JavaScriptでは「;」がスクリプトの文節を区切る仕切りになることを使って、 onLoad="MM_preloadImages('images/pic.gif', 以下略); setInterval('move()',100)" と、「;」で区切って二つの処理を記述することで、並行して二つの処理を、この一つのイベントハンドラ内で指定できると思います。 参考まで。

noname#5355
質問者

お礼

わ～～、すばやい回答ありがとうございます！！ できました！！ でも・・ bodyタグの中に、センター寄せのテーブルがあるのですが、その中で雪を降らせたいんです。 もし、テーブルの中で降らせるのが無理だったら、画面中央で降るようにしたいのですが、どうしたらよいでしょうか？ たびたび申し訳ありませんが、よろしくお願い致します。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • 特定のものにだけスクリプトを有効にする

    今晩は。JavaScript初心者です。 今、雪を降らせるスクリプトを作っています。 外部のjsファイルに記述したスクリプトを、特定のidを付けたdivにだけ有効にしたいです。 -----html------------------------------ <html> <head> <script type="text/javascript" src="js/snow.js"></script> </head> <body> <div id="snow"> </div> </body> </html> -----JavaScript(snow.js)------------------------------ sx = new Array(); sy = new Array(); sp = new Array(); num = 50; scrnx = 100; scrny = 500; function snowWrite() { styl = "<img src='snow.gif' style='position:relative;width:6px;height:6px;z-index:3;top:"; for (i=0; i<num; i++) { sx[i] = Math.floor(Math.random()*100); sy[i] = Math.floor(Math.random()*500); sp[i] = Math.floor(Math.random()*5) + 1; document.write(styl+sy[i]+"px;left:"+sx[i]+"px;' name='snow"+i+"'>"); } } function moveSnow() { for (i=0; i<num; i++) { sy[i] += sp[i]; if (sy[i] > scrny) sy[i] = -10; document.images["snow"+i].style.top = sy[i]; } } snowWrite(); 「document.getElementById」あたりかなと思ったのですが、それだとして（まったく見当違いかもしれませんが）、どこにどう記述してよいのかわかりません。 ご存知の方がいらっしゃいましたら、ご教授いただきたいです。 よろしくお願い致します。

  • 画像をランダムな座標に一定の時間で表示する方法

    javascript勉強中の65歳の初心者です 画像を乱数で得た座標に一定の時間で表示したいと次の通り試行錯誤していますが、どうも最初の1個は表示されますが配列の2番目以降表示されません。 初歩的な質問で恐縮ですがご指導お願いします。 <html> <head> <title>テスト表示</title> </head> <body onload= "set()"> <script language="JavaScript"><!-- sx = new Array(); sy = new Array(); num = 20; var timer; var n; var i; var m; n = 0; function set(){ for (m=0; m<num; m++) { sx[m] = Math.floor(Math.random()*800); sy[m] = Math.floor(Math.random()*600); } setInterval("uncohyouji()", 2000); } function uncohyouji(){ styl = "<img src='unco1.gif'style='position:absolute;"; document.write(styl+sx[n]+"px;left:"+sy[n]+"px;' name='unco1"+n+"'>"); n++; }

  • 雪が降るスクリプトについて

    雪がふるスクリプトを http://www.kirupa.com/developer/mx/snow.htm で拾ったのですが、flashplayer6対応のようで、 これをflashplayer7対応にするにはどうしたらよいのでしょうか? フレームには、 for (k=0; k<50; k++) { duplicateMovieClip(this.snow, "snow"+k, k); } で、ムービークリップには、 onClipEvent (load) { //specifies the size of the movie stage movieWidth = 300; movieHeight = 200; //variables that will modify the falling snow i = 1+Math.random()*2; k = -Math.PI+Math.random()*Math.PI; //giving each snowflake unique characteristics this._xscale = this._yscale=50+Math.random()*100; this._alpha = 75+Math.random()*100; this._x = -10+Math.random()*movieWidth; this._y = -10+Math.random()*movieHeight; } onClipEvent (enterFrame) { //putting it all together rad += (k/180)*Math.PI; this._x -= Math.cos(rad); this._y += i; if (this._y>=movieHeight) { this._y = -5; } if ((this._x>=movieWidth) || (this._x<=0)) { this._x = -10+Math.random()*movieWidth; this._y = -5; } } とあるようですが。

    • ベストアンサー
    • Flash
  • 雪の降るスクリプトで、、、

    以前雪の降るスクリプトについて質問させていただいたものです。 フレームには、 for (k=0; k<50; k++) { duplicateMovieClip(this.snow, "snow"+k, k); } で、ムービークリップには、 onClipEvent (load) { //specifies the size of the movie stage movieWidth = 300; movieHeight = 200; //variables that will modify the falling snow i = 1+Math.random()*2; k = -Math.PI+Math.random()*Math.PI; //giving each snowflake unique characteristics this._xscale = this._yscale=50+Math.random()*100; this._alpha = 75+Math.random()*100; this._x = -10+Math.random()*movieWidth; this._y = -10+Math.random()*movieHeight; } onClipEvent (enterFrame) { //putting it all together rad += (k/180)*Math.PI; this._x -= Math.cos(rad); this._y += i; if (this._y>=movieHeight) { this._y = -5; } if ((this._x>=movieWidth) || (this._x<=0)) { this._x = -10+Math.random()*movieWidth; this._y = -5; } } これを再生するといきなりステージに現れてしますのですが、 ステージの上からY座標Oから(上から降るように)するにはどう したらよいでしょうか? onClipEvent (load)に this._y = 0; と付け加えてみましたが駄目でした。 ご教授お願いいたします。

    • ベストアンサー
    • Flash
  • style.visibility="hidden";

    下記は画面にJavaScriptで碁盤の目に区切り 左上の一区切りの下地を表示するコードです <html> <head> <title>タイル</title> <script language="JavaScript"> <!-- var block = [0]; function setTile() { num = 100; w = Math.floor(document.body.clientWidth / num); h = Math.floor(document.body.clientHeight/ num); wTag = ""; n = 1; for (j=0; j<=h; j++) { for (i=0; i<=w; i++) { wTag += "<span id='abc" + n +"' style='position:absolute;top:" + j*num + "px;left:" + i*num + "px;width:" + (num-1) + "px;height:" + (num-1) + "px;background-color:blue;'>" + "</span>"; block[n] ='abc' + n; n++; } } document.all["tile"].innerHTML = wTag; document.body.style.visibility = "visible"; abc1.style.visibility="hidden"; } // --> </script> </head> <body onLoad="setTile()" style="visibility:hidden"> <div id="tile" style="position:absolute;top:0px;left:0px;"></div> </body> </html> 下地を表示する abc1.style.visibility="hidden"; を下記に直すと動かなくなります block[1].style.visibility="hidden"; よろしくお願いします。

  • scriptを使いまわしたい。

    見よう見まねで下記のようなスクリプトを記述しています。 複数のムービークリップに設定していますが、編集するのにかなり手間がかかります。うまく使いまわす方法はございませんでしょうか…。 また、記述の仕方にも問題等ありましたらご指南ください。。 onClipEvent (load) { 　sx_move = Math.floor(Math.random() * -10) - 3; 　sy_move = Math.floor(Math.random() * 6) - 3; 　s_scale = Math.floor(Math.random() * 40) + 40; 　_xscale = (s_scale); 　_yscale = (s_scale); 　n = 1; } onClipEvent (enterFrame) { 　_x += (sx_move); 　_y += (sy_move); } on (rollOver) { 　mx.behaviors.DepthControl.bringToFront(_root); 　this.onEnterFrame = function () { 　　n += 1; 　　_x -= (sx_move); 　　_y -= (sy_move); 　　if (n < 20) { 　　　_x = (_x + 25) / 1.5; 　　　_y = (_y + 12) / 1.5; 　　　_xscale = (_xscale + 50) / 1.5; 　　　_yscale = (_yscale + 50) / 1.5; 　　} else if (n < 40) { 　　　stop(); 　　} else if (n < 50) { 　　　_x += 13; 　　　_y += 13; 　　　_alpha -= 20; 　　　_xscale = (_xscale) / 1.2; 　　　_yscale = (_yscale) / 1.2; 　　} else { 　　　stop(); 　　} 　}; }

    • ベストアンサー
    • Flash
  • onloadイベントで二つの操作をやりたいのですがどうすればいいでしょうか？

    javascriptでファイルを読み込んだらイベントを発生させる"onload"イベントでわからないことがあります。 ↓以下のように一つのonloadイベントで二つの操作をしたいのですがどうすればよいでしょうか？ 分けて記述してしまうと作動しません。 かといって <body onload="MM_preloadImages('/images/global/menu_00_ro.gif'),load_my_rss">とするわけにもいきません。 \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ <script language="javascript"> function load_my_rss(){ get_rss("http://www.*******.jp/make_rss/rss1.rdf"); } window.onload = load_my_rss; </script> <body onload="MM_preloadImages('/images/global/menu_00_ro.gif')"> \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ どうすれば↓の二つの操作をほぼ同時に行えるでしょうか？ window.onload = load_my_rss; onload="MM_preloadImages どなたかよいアドバイスをお願いします。

  • プレロードイメージについて

    こんにちは。プレロードイメージについて教えて下さい。 私は、ロールオーバーボタンのover部の画像を、下記のように外部スクリプトとして、bodyに読み込ませています。 <html> <head> <meta 中略 script-type"content="text/javascript"> <script 中略 javascript"src="./preload.js"></script> </head> <body onload="preloadImages()"> ..... </body></html> +----------------------------------- 外部スクリプトファイル名：preload.js 中身のソース： function preloadImages() { (new Image).src = './img/btn/menu_01-over.gif'; (new Image).src = './img/btn/menu_02-over.gif'; (new Image).src = './img/btn/menu_03-over.gif'; } こんな感じです。ですが、本当に、これで良いのかいつも気になっていました。それは、ヘッダ部でこれを呼び出しているので、bodyタグにonloadは要らないのか、 でも関数名「preloadImages()」にしているので、やはり要るのか、よく判らなくなって悩んでいます。 もし、間違っている場合、どうしたら良いのか教えて下さい。よろしくお願いします。

  • スクリプトエラーを修正できません。

    スクリプトエラーがでて困っています。 オブジェクトを指定してください。 とのこと。 エラーのラインのタグは以下です。 どうしたらいいのか、どなたか教えてください。 <BODY bgcolor="#FFFFFF" onload="MM_preloadImages('images/side_otoiawase2.gif','images/side_kaisya2.gif','images/side_tokutei2.gif','images/bottan_seikaino2.gif');" <a name="top"><!--アクセス解析タグ　ここから--><script language="JavaScript" src="http://analyzer2.fc2.com/analyzer.js?uid=777967"></script>

  • カーソルからの泡操作

    カーソルから上に向けて泡を出すプログラムがあります． これを，上にではなく，ブラウザ上のある特定箇所に 泡を向かわせるには，以下のプログラムをどのように変更したらよいでしょうか？ 教えていただけると，とても助かります． <SCRIPT language="JavaScript"> <!--// Image0=new Image(); Image0.src="awa.gif"; Amount=20; Ymouse=-50; Xmouse=-50; Ypos=new Array(); Xpos=new Array(); Speed=new Array(); rate=new Array(); grow=new Array(); Step=new Array(); Cstep=new Array(); nsSize=new Array(); ns=(document.layers)?1:0; WinHeight=(document.layers)?window.innerHeight:window.document.body.clientHeight; (document.layers)?window.captureEvents(Event.MOUSEMOVE):0; function Mouse(evnt){ Ymouse=(document.layers)?evnt.pageY-20:event.y-20; Xmouse=(document.layers)?evnt.pageX:event.x; } (document.layers)?window.onMouseMove=Mouse:document.onmousemove=Mouse; for (i=0; i < Amount; i++){ Ypos[i]=Math.random()*WinHeight-Ymouse; Xpos[i]=Xmouse; Speed[i]=Math.random()*10+1; Cstep[i]=0; Step[i]=Math.random()*0.1+0.05; grow[i]=4; nsSize[i]=Math.random()*15+5; rate[i]=Math.random()*0.5+0.1; } if (ns){ for (i = 0; i < Amount; i++){ document.write("<LAYER NAME='sn"+i+"' LEFT=0 TOP=0><img src="+Image0.src+" name='N' width="+nsSize[i]+" height="+nsSize[i]+"></LAYER>"); } } else{ document.write('<div style="position:absolute;top:0px;left:0px"><div style="position:relative">'); for (i = 0; i < Amount; i++){ document.write('<img id="si" src="'+Image0.src+'" style="position:absolute;top:0px;left:0px;filter:alpha(opacity=90)">'); } document.write('</div></div>'); } function MouseBubbles(){ var hscrll=(document.layers)?window.pageYOffset:document.body.scrollTop; var wscrll=(document.layers)?window.pageXOffset:document.body.scrollLeft; for (i=0; i < Amount; i++){ sy = Speed[i]*Math.sin(270*Math.PI/180); sx = Speed[i]*Math.cos(Cstep[i]*5); Ypos[i]+=sy; Xpos[i]+=sx; if (Ypos[i] < -40){ Ypos[i]=Ymouse; Xpos[i]=Xmouse; Speed[i]= 6+Math.random()*3; grow[i]=4; nsSize[i]=Math.random()*15+5; } if (ns){ document.layers['sn'+i].left=Xpos[i]+wscrll; document.layers['sn'+i].top=Ypos[i]+hscrll; } else{ si[i].style.pixelLeft=Xpos[i]+wscrll; si[i].style.pixelTop=Ypos[i]+hscrll; si[i].style.width=grow[i]; si[i].style.height=grow[i]; } grow[i]+=rate[i]; Cstep[i]+=Step[i]; if (grow[i] > 24) grow[i]=25; } setTimeout('MouseBubbles()',10); } MouseBubbles(); //--> </script> [参考] http://hp.ms-factory.biz/javak_bubbles2.htm

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する