画像が降る上る２１-１　画像流れ-同時４方向(範囲指定)

『画像が流れる-４方向』のJavaScriptをさらに改造。範囲指定をして、その中で４方向に同時に画像が流れます。
これのbody全面のJavaScriptは、こちら。

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

<!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{background:url(frc8.gif)#baad9a;}/*★花柄背景指定*/

/*★バラの背景画像の指定。必ず#bgimgを指定*/
#bgimg{
background-image:url(pt19.jpg);/*★バラの背景画像名*/
position:absolute;
top:230px;/*★上からの位置*/
left:200px;/*★左からの位置*/
width:400px;/*★横サイズ*/
height:267px;/*★縦サイズ*/
/*★バラの背景画像の装飾。不要なら削除*/
border: solid 1px #bbbbbb;/*★枠指定*/
border-radius:20px;/*★角丸指定*/
box-shadow: -5px -5px 5px #dec8b1 inset;/*★内側影指定。マイナス値で反対方向*/
}
-->
</style>
<!--★ここまでコピー。bodyの中にもコピーがあります-->

</head>
<body>
<br><br>
<p>『画像が流れる-４方向』のJavaScriptをさらに改造。範囲指定をして、その中で４方向に同時に画像が流れます。<br>
これのbody全面のJavaScriptは、<a href="huru_eos21.html">こちら</a>。</p>
<hr>
<p style="text-shadow: 5px 5px 2px #999999;font-size: 200%;font-weight:bold;}">―動くJavaScript―</p>


<!--★ここからコピー。位置はbodyの中です-->
<script type="text/javascript">
<!--
/*================================================================================
JavaScript by OpenSpace一撃必殺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] = "awa6.png";
snow[1] = "awa7.png";
snow[2] = "awa8.png";
snow[3] = "awa9.png";
snow[4] = "../e20os/awa3.png";
snow[5] = "../e20os/awa4.png";

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

/*★以下４行は、最初はCSSの#bgimg背景画像の設定値と同じ指定にします。しかし背景画像をCSSで装飾すると、上る画像の範囲が微妙にずれることがあります。その場合はこちらの数値で微調整*/
var tp=230;//★背景画像のtop(上)からの位置
var lp=200;//★背景画像のleft(左)からの位置
var xp = 400;//★降る範囲横幅か背景画像横サイズ
var yp = 267;//★降る範囲縦幅か背景画像縦サイズ

var j = 0;
var i = 0;
var m=4;//★4方向指定
var mo = new Array();
var sx = new Array();
var sy = new Array();
var sp = new Array();

scrnx = xp-imgw;
scrny = yp-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;}
document.write("<div style='z-index:-1;' id='bgimg'></div>")
}

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  = tp+sy[i]+"px";
document.getElementById("img"+i).style.left  = lp+sx[i]+"px";
}
setTimeout('moveSnow()',speed);
}
window.onload=moveSnow;
//-->
</script>
<!--★ここまでコピー-->
</body>
</html>

OpenSpace２１-１■画像D■ 画像流れ-同時４方向(範囲指定) UP日時 : 2014/09/07

　OpenSpace２１-１■画像D■　画像流れ-同時４方向(範囲指定)　　　　　UP日時 : 2014/09/07