画像が降る上る７■複数画像の泡が上る -sna WORLD-

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

■上から下へ画像が降るJavaScriptはこちら → 降る上る５■画像D■複数画像の花が散る -sna WORLD-

上記のJavaScriptを改造しました。複数種類の泡が、下から上へ昇っていくJavaScriptです。
文章の上に画像が流れるか、文章の下に隠れるか（←この見本では隠れる）の指定も選択できます。

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

shabon1.png

shabon2.png

shabon3.png

w50.png

私の作成した
背景透過png。
右クリックで
どうぞ。

原本の古いブラウザ対応を削除し、複数画像指定に変更。向きを下から上へ変更。

<!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(wh1a.png) no-repeat #3ab;/*★背景画像指定。繰り返し無し。背景色 濃青色*/
background-position:center 50px;/*★横位置中央　縦位置上から50px*/
}
--></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=["shabon1.png","shabon2.png","shabon3.png","w50.png"];
var myurl="";   //★画像パス。文書とは別のフォルダーなどに入っている時は指定。全画像共通部分

var haw=50;     //★使用画像の最大実寸横幅
var hah=50;     //★使用画像の最大実寸縦幅
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);/*■原本y +=～*/
/*■下記原本1行変更*/
if(y<-hah){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>

降る上る７■画像D■複数画像の泡が上る -sna WORLD- UP日時 : 2016/03/31

　降る上る７■画像D■複数画像の泡が上る -sna WORLD-　　　　UP日時 : 2016/03/31