画像が降る上る２１　画像が流れる-同時４方向

『画像が流れる-４方向』のJavaScriptをさらに改造。
４方向に同時に画像が流れます。
これにさらに範囲指定を追加したJavaScriptは、こちら。

(※注1)今回HTML5では問題ないのですが、それ以外のドキュメント宣言では、ブラウザのFirefoxだけ動作がおかしくなることがあります。
その防止方法は、CSSで body{ width:100%;height:100%;} の記述をすること。
この記述は画面の揺れ防止のための任意ですが、この記述があるとFirefoxもちゃんと動作します。

◆全ソース◆
ソースの中でマウスの右クリックで『すべて選択』した後に、
再度右クリックして『コピー』

<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">

<title>画像が降る上る２１　画像が流れる-同時４方向</title>

<!--★ここからコピー-->
<style type="text/css">
<!--
/*★揺れ防止とブラウザのFirefox用(※注1)*/
body {
width:100%;height:100%;}
-->
</style>
<!--★ここまでコピー。bodyの中にもコピーがあります-->

</head>
<body bgcolor="#0f6c89">

<p style="margin-top:750px;background-color:#eeeeee;width:70%;padding:20px;">『画像が流れる-４方向』のJavaScriptをさらに改造。<br>
４方向に同時に画像が流れます。<br>
これにさらに範囲指定を追加したJavaScriptは、<a href="huru_e21_1.html">こちら</a>。<br>
<br>
(※注1)今回HTML5では問題ないのですが、それ以外のドキュメント宣言では、ブラウザのFirefoxだけ動作がおかしくなることがあります。<br>
その防止方法は、CSSで body{ width:100%;height:100%;} の記述をすること。<br>
この記述は画面の揺れ防止のための任意ですが、この記述があるとFirefoxもちゃんと動作します。</p>

<!--★ここからコピー。位置はbodyの中です-->
<script type="text/javascript">
<!--
/*================================================================================
JavaScript by 一撃必殺JavaScript日本語リファレンス→JavaScript例文辞典
http://www.openspc2.org/reibun/javascript/index.html#19
→雪を降らせる　http://www.openspc2.org/reibun/javascript/graphic/022/index.html
=================================================================================
降る画像を複数にして、HTML5対応にして、４方向(下へ、上へ、左→右、右→左)に同時に画像が流れる。同時流れの改造の参考サイト：オリジナルJavaScript　http://jun88.6.ql.bz/　2014/09/07
==================================================================================*/

/*★降る画像種類。増減可能だが、最低４個指定する。同じ名の画像を指定しても可能。画像は上から順番に↓↑→←の順に動き、増加するとその順番を繰り返す。*/
var snow = new Array();
snow[0] = "../../hoka/shabon2.png";
snow[1] = "../wb20.png";
snow[2] = "drg4.gif";
snow[3] = "ken2.gif";
snow[4] = "../../hoka/shabon4.png";
snow[5] = "../bubble.gif";
snow[6] = "drg4.gif";
snow[7] = "ken2.gif";

var num = 32;//★降る画像表示数。4以上。画像種類で割り切れない分は上から振り分け。
var imgw=85;//★降る画像の最大横サイズ 
var imgh=87;//★降る画像の最大縦サイズ
var speed = 40;//★原本100。小さいほど速い
var opa=0.9;//★画像透過指定。1で透過無し。0で完全透明なので、0指定はしないこと

var j = 0;
var i = 0;
var m=4;
var mo = new Array();
var sx = new Array();
var sy = new Array();
var sp = new Array();

/*★下記２行は、スクロール不要ならdocument.documentElementままでOK。スクロールの必要のある縦に長いページの時は、document.bodyにすると、スクロールした下の部分にも雪が降ります。しかしHTML5では、document.bodyで下まで降らない時には、divやtable等で空間を作成して下さい。*/

scrnx = document.documentElement.clientWidth-imgw;
scrny = document.documentElement.clientHeight-imgh;

for (i=0; i<num; i++){
mo[i] = i%m;
sx[i] = Math.floor(Math.random()*scrnx);
sy[i] = Math.floor(Math.random()*scrny);
sp[i] = Math.floor(Math.random()*5) + 1;
document.write("<img src='"+snow[j]+"' style='position:absolute;z-index:3;top:0px;left:0px; opacity:"+opa+";'id='img"+i+"'>");
if (j == (snow.length-1)) { j = 0; } else { j += 1;}
}

function moveSnow(){
for (i=0; i<num; i++){
if(mo[i]==0){   sy[i] += sp[i];//★下向き
		if (sy[i] > scrny)  sy[i] = 0;}

if(mo[i]==1){
		sy[i] -= sp[i];//★上向き
		if (sy[i] < 0) sy[i] = scrny;}

if(mo[i]==2){
		sx[i] += sp[i];//★左から右
		if (sx[i] > scrnx) sx[i] = 0;}

if(mo[i]==3){
		sx[i] -= sp[i];//★右から左
		if (sx[i] < 0) sx[i] = scrnx;}

document.getElementById("img"+i).style.top=sy[i]+"px";
document.getElementById("img"+i).style.left=sx[i]+"px";
}
setTimeout('moveSnow()',speed);
}
window.onload=moveSnow;
//-->
</script>
<!--★ここまでコピー-->

<br><br>
</body>
</html>

OpenSpace２１■画像D■ 画像が流れる-同時４方向 UP日時 : 2014/09/07

　OpenSpace２１■画像D■　画像が流れる-同時４方向　　　　　UP日時 : 2014/09/07