- ベストアンサー
雪が降るようなスクリプト
<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部分に雪の降るスクリプトをどのように入れ込んだらいいのか分からないので教えてください。
- JavaScript
- 回答数4
- ありがとう数5
- みんなの回答 （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で動作することを確認してあります。 参考になれば。
その他の回答 (3)
- gimmick
- ベストアンサー率49% (134/270)
ページを開いた時のウィンドウサイズに合わせて中央に表示します。ブラウザ依存の処理が入っていますが、最近の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等で更新しないと中央に表示されません。
お礼
お礼遅くなってすみません。 再度ご回答ありがとうございました。 自分にJavaScriptの知識がほとんどなく、教えていただいても理解してアレンジするのがとても難しかったです。 出来れば画面トップから振り出すのではなく、画面中央のテーブル内で降らせたかったので、プログラマーに少し書き換えてもらいました。 参考にさせていただきました。 ありがとうございます。
- gimmick
- ベストアンサー率49% (134/270)
表示範囲を指定できるように改造しました。 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>
お礼
gimmikさん、ご回答ありがとうございます。 範囲指定についてですが、ユーザーの環境によりブラウザウィンドウの大きさが変わってくるので、今回は使用できません。 環境によらず常にセンターの600pxの範囲内に雪を降らせることはできないでしょうか。 このスクリプトじゃなくてもいいので、方法があれば教えていただきたいです。 よろしくお願いいたします。
二つのソースを単純に組み合わせてみました。 これで動くのではないでしょうか。 <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)" と、「;」で区切って二つの処理を記述することで、並行して二つの処理を、この一つのイベントハンドラ内で指定できると思います。 参考まで。
お礼
わ～～、すばやい回答ありがとうございます！！ できました！！ でも・・ bodyタグの中に、センター寄せのテーブルがあるのですが、その中で雪を降らせたいんです。 もし、テーブルの中で降らせるのが無理だったら、画面中央で降るようにしたいのですが、どうしたらよいでしょうか？ たびたび申し訳ありませんが、よろしくお願い致します。
お礼
再度ご回答ありがとうございました。 とても詳しく説明いただき、感謝いたします。 お礼が遅くなってしまいまして申しわけありませんでした。 動作確認までしていただいて、お手間かけました。 MacのIEで確認するとウィンドウサイズを変えたときに範囲が変わりませんでしたが、考え方やスクリプトは参考にさせていただきました。 ありがとうございました。