画像が降る上る８■複数画像の泡が上るサイズ指定 -sna WORLD-

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

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

上記のJavaScriptを改造しました。複数種類の泡が、下から上へ昇っていくJavaScriptです。
流れる画像のサイズを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(lfp2.jpg) no-repeat #000;/*★背景画像指定。繰り返し無し。背景色黒色*/
background-size:100% auto;/*★背景画像横幅100%指定。見本の画像の実寸は横800px縦600px*/
}
--></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/31
================================================================*/
(function (){ var i=0; //即時関数で囲んでグローバル変数を消すため、この行はこのままで

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

var haw=[14,20,10];  //★画像横幅(１番目画像,２番目画像,３番目画像～)と続ける
var hah=[14,20,10];  //★画像高さ(１番目画像,２番目画像,３番目画像～)と続ける
var Zx=-1;           //★文章の上に画像が流れるか？　上に流れる：1   下に隠れる：-1
var num=24;	     //★流れる画像の数
var time=50;	     //★原本50。画像の流れる間隔1000=1秒。数値が小さいほど速い

//指定ここまで---------------------------------------------------------
var imgArray = new Array(num);
var w=window.innerWidth+haw[0];
var h=window.innerHeight+hah[0];
var lt=window.pageXOffset-haw[0];
var tp=window.pageYOffset-hah[0];
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];  
img.width=haw[i%len]; 
img.height=hah[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);/*■原本y +=～*/
/*■下記原本1行変更*/
if(y<-hah[0]){y=tp+h; 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>

降る上る８■複数画像の泡が上るサイズ指定 -sna WORLD- 最終修正日 : 2016/03/31

　降る上る８■複数画像の泡が上るサイズ指定 -sna WORLD-　　　　最終修正日 : 2016/03/31