画像が降る上る２２　画像流れ-同時２方向６種

『画像が流れる-４方向』のJavaScriptをさらに改造。
２方向に同時に画像が流れます。２方向の組み合わせは、数字指定で下記の合計６種を数字選択。
1=↓+↑ 　 2=→+←　 3=↓+→ 　 4=↓+← 　 5=↑+→　 6=↑+←

今回は6指定で、画像が↑と←の２方向に同時に流れます。
これにさらに範囲指定を追加した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">
<!--
body { 
/*★揺れ防止とブラウザのFirefox用(※注1)*/
width:100%;height:100%;}
-->
</style>

</head>
<body bgcolor="#cbde5c">
<br><br>
<p style="margin-top:750px;background-color:#eeeeee;width:70%;padding:20px;">『画像が流れる-４方向』のJavaScriptをさらに改造。<br>
２方向に同時に画像が流れます。２方向の組み合わせは、数字指定で下記の合計６種を数字選択。<br>
 1=↓+↑ 　 2=→+←　  3=↓+→ 　 4=↓+← 　 5=↑+→　  6=↑+←<br> 
<br>
今回は6指定で、画像が↑と←の２方向に同時に流れます。<br>
これにさらに範囲指定を追加したJavaScriptは、<a href="huru_e22_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対応にして、同時に２方向に画像が流れる。方向の組み合わせは６種(1=↓+↑  2=→+←  3=↓+→  4=↓+←  5=↑+→  6=↑+← )。
同時流れの改造の参考サイト：オリジナルJavaScript　http://jun88.6.ql.bz/　2014/09/07
==================================================================================*/
//★雪の降る向き指定 1=↓+↑  2=→+←  3=↓+→  4=↓+←  5=↑+→  6=↑+← 
var move=6; 
var snow = new Array();//★降る画像種類。増減可能　　
snow[0] = "../../uku/msk3.png";//★交互に↓向きの画像と↑向きのを入れる
snow[1] = "hana2.png";//★向きが3指定の時は↓と→の交互。上記矢印参照
snow[2] = "../wbw20.png";
snow[3] = "hana1.png";
snow[4] = "../../uku/msk2.png";
snow[5] = "hana3.png";

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

var j = 0;
var i = 0;
var m=2;//★2方向
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:"+sy[i]+"px;left:"+sx[i]+"px; opacity:"+opa+";'id='img"+i+"'>");
if (j == (snow.length-1)) { j = 0; } else { j += 1;}
}
function moveSnow(){
for (i=0; i<num; i++){
if (move==1){
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 (move==2){
if(mo[i]==0){
		sx[i] += sp[i];//★→左から右
		if (sx[i] >scrnx) sx[i] = 0;}
if(mo[i]==1){
		sx[i] -= sp[i];//★←右から左
		if (sx[i] <0) sx[i] = scrnx;}}
if (move==3){
if(mo[i]==0){
		sy[i] += sp[i];//★↓下向き
		if (sy[i] >scrny)  sy[i] = 0;}
if(mo[i]==1){
		sx[i] += sp[i];//★→左から右
		if (sx[i] >scrnx) sx[i] = 0;}}
if (move==4){
if(mo[i]==0){
		sy[i] += sp[i];//★↓下向き
		if (sy[i] > scrny)  sy[i] = 0;}
if(mo[i]==1){
		sx[i] -= sp[i];//★←右から左
		if (sx[i] < 0) sx[i] =scrnx;}}
if (move==5){
if(mo[i]==0){
		sy[i] -= sp[i];//★↑上向き
		if (sy[i] < 0) sy[i] =scrny;}
if(mo[i]==1){
		sx[i] += sp[i];//★→左から右
		if (sx[i] > scrnx) sx[i] = 0;}}
if (move==6){
if(mo[i]==0){
		sy[i] -= sp[i];//★↑上向き
		if (sy[i] < 0) sy[i] =scrny;}
if(mo[i]==1){
		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>
<!--★ここまでコピー-->
</body>
</html>

OpenSpace２２■画像D■ 画像流れ-同時２方向６種 UP日時 : 2014/09/08

　OpenSpace２２■画像D■　画像流れ-同時２方向６種　　　　　UP日時 : 2014/09/08