OpenSpace２■画像D■　画像が流れる-４方向選択

●2016/06/07：即時関数で囲んで、グローバル変数を消しました。

■複数種類の画像が降るJavaScriptはこちら→　OpenSpace１■画像D■画像が降る

上記のJavaScriptを改造しました。
ランダム透過指定の複数種類の画像が、指定方向に流れます。
原本は画像が上から下に降る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>OpenSpace２■画像D■　画像が流れる-４方向選択</title>

<!--★背景画像指定ここから。不要なら削除-->
<style type="text/css"><!--
body{ 
background:url(wa4.jpg) no-repeat #9fc62d;/*★背景画像指定。繰り返し無し。背景色黄緑色*/
background-size:100% auto;/*★画面横幅一杯の指定*/
}
--></style>
<!--★背景画像指定ここまで-->

</head>
<body>

<!--★ここからコピー。位置はbodyの中です-->
<script type="text/javascript"><!--
/*================================================================================
画像が流れる・４方向選択： 複数画像、透過指定、HTML5対応、４方向選択へ改造  ★2016/06/07
By　http://www.openspc2.org/reibun/javascript/graphic/022/index.html (サイト名 OpenSpace)
==================================================================================*/
(function (){   //即時関数で囲んでグローバル変数を消すため、この行はこのままで

var move=3;//★画像の流れる向き指定 1=下へ 2=上へ 3=左から右 4=右から左*/

//★流れる画像指定。画像を順番に"●",と区切って、いくつでも並べる。最後の]の前には,(カンマ)無し
var snow =["wan14.gif","wan15.gif","wan16.gif","wan17.gif","wan18.gif"];

var Zx="-1";        //★文章の上に画像が流れるか？　上に流れる：1   下に隠れる：-1
var num=20;         //★流れる画像表示数
var imgw=29;        //★流れる画像の最大横サイズ 
var imgh=21;        //★流れる画像の最大縦サイズ
var spd=80;         //★原本100。小さいほど速い
var maxOp=0.9;      //★透過の最大値。ランダム変化です。0.1から1の間で指定。miniOpより同じか大きくする
var miniOp=0.6;     //★透過の最小値。ランダム変化です。0.1から1の間で指定。maxOpより同じか小さくする

//指定ここまで--------------------------------------------------------------------------
var sx=[], sy=[], sp=[], opa=[];//追加有り
var len=snow.length, i=0;
var w=window.innerWidth+imgw, h=window.innerHeight+imgh;//修正
for (i=0; i<num; i++){
sx[i] = Math.floor(Math.random()*w);
sy[i] = Math.floor(Math.random()*h);
sp[i] = Math.floor(Math.random()*6)+2;//修正
opa[i]=Math.random()*(maxOp-miniOp)+miniOp;//追加
document.write("<img src="+snow[i%len]+" id='sn"+i+"'>");
}
function moveSnow(){
for (i=0; i<num; i++){
if (move===1) { sy[i] +=sp[i]; if(sy[i]>h){ sy[i]=0; }}//★下向き
if (move===2) { sy[i] -=sp[i]; if(sy[i]<0){ sy[i]=h; }}//★上向き
if (move===3) { sx[i] +=sp[i]; if(sx[i]>w){ sx[i]=0; }}//★左から右
if (move===4) { sx[i] -=sp[i]; if(sx[i]<0){ sx[i]=w; }}//★右から左
var ob=document.getElementById("sn"+i).style;
ob.top=-imgh+sy[i]+"px"; ob.left=-imgw+sx[i]+"px";
ob.position="fixed"; ob.zIndex=Zx; ob.opacity=opa[i];//追加
}
setTimeout(moveSnow,spd);
}
moveSnow();
}());//即時関数終了
//--></script>
<!--★ここまでコピー-->

</body>
</html>

OpenSpace２■画像D■ 画像が流れる-４方向選択 最終修正日 : 2016/06/07

　OpenSpace２■画像D■　画像が流れる-４方向選択　　　　　最終修正日 : 2016/06/07