画像が降る上る５■複数画像の花が散る -sna WORLD-

●2016/03/30：即時関数で囲んで、グローバル変数を消しました。
複数種類の画像の花が降るJavaScriptです。
文章の上に画像が散るか、文章の下に隠れるか（←この見本では隠れる）の指定も選択できます。
原本の作者はアルバム作成のフリーソフト『すなねぃる』の方。
原本の降る画像は１種類です。原本はこちらから。

■降る画像のサイズ指定ができるJavaScriptはこちら → 降る上る６■画像D■複数画像の花が散るサイズ指定 -sna WORLD-

原本の古いブラウザ対応を削除し、複数画像指定に変更。

<!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>画像が降る上る５■複数画像の花が散る -sna WORLD-</title>

<!--★背景画像指定ここから。不要なら削除-->
<style type="text/css"><!--
body{
background:url(gat118a.jpg) no-repeat left top #000;/*★背景画像指定。繰り返し無し。左上位置。背景色黒色*/
}
--></style>
<!--★背景画像指定ここまで-->

</head>
<body>

<!--★ここからコピー-->
<script type="text/javascript"><!--
/*==============================================================
複数画像の花が散る：Script Coded & Copyright By Snappy 
E-Mail Address : metis@plum.freemail.ne.jp
WEB Site URI : http://homepage3.nifty.com/metis/ (sna WORLD)
★旧ブラウザ対応分削除。複数画像に変更　2016/03/30
================================================================*/
(function (){ var i=0; //即時関数で囲んでグローバル変数を消すため、この行はこのままで

//★画像指定。画像を順番に"●",と区切って、いくつでも並べる。最後の]の前には,(カンマ)無し
var ha=["tuto5.png","tuto7.png","soko16.gif"];
var myurl="";   //★画像パス。文書とは別のフォルダーなどに入っている時は指定。全画像共通部分

var haw=32;     //★使用画像の最大実寸横幅
var hah=32;     //★使用画像の最大実寸縦幅
var Zx=-1;      //★文章の上に画像が流れるか？　上に流れる：1   下に隠れる：-1
var num=24;	//★流れる画像の数
var time=50;    //★原本50。画像の流れる間隔1000=1秒。数値が小さいほど速い

//指定ここまで---------------------------------------------------------
var imgArray=new Array(num);
var w=window.innerWidth+haw;
var h=window.innerHeight+hah;
var lt=window.pageXOffset-haw;
var tp=window.pageYOffset-hah;
var imglen=imgArray.length;
var len=ha.length;

for(i=0; i<imglen; i++) {
var img=document.createElement("IMG");
img.src=myurl+ha[i%len];  
var ob=img.style;
ob.position="fixed";/*■absoluteをfixedに変更*/
ob.left =lt+Math.floor(Math.random()*w)+"px";
ob.top =tp+Math.floor(Math.random()*h)+"px";
ob.zIndex=Zx;/*■追加*/
document.body.appendChild(img);
imgArray[i]=img;
}

function fallLeaves(){
for(i=0; i<imglen; i++){
var img=imgArray[i];
var x=parseInt(img.style.left);
var y=parseInt(img.style.top);
y+=2+Math.floor(Math.random()*2);
if(y >tp+h){y=tp; x=lt+Math.floor(Math.random()*w);}
else{ x +=Math.floor(Math.sin(y/40)*2); if(x<lt){x=lt;}else if(x>lt+w){x=lt+w;}}
img.style.left=x+"px"; img.style.top=y+"px";
}
setTimeout(fallLeaves,time); 
}
fallLeaves();
}());//即時関数終了
//--></script>
<!--★ここまでコピー-->

</body>
</html>

降る上る５■画像D■複数画像の花が散る -sna WORLD- UP日時 : 2016/03/30

　降る上る５■画像D■複数画像の花が散る -sna WORLD-　　　　UP日時 : 2016/03/30