ふわふわ■花火２　打上げ花火(画像)１回毎変化

<!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"><!--
/*★今回使用したのは横幅150px高さ600pxの縦長の画像です*/
body{ background:url(pe15.gif) repeat-x #000;}/*★背景画像横並び指定　背景色黒*/
--></style>
<!--★背景画像設定。不要なら削除。ここまで-->

</head>
<body>

<!--★ここからコピー。位置はbodyの中です-->
<script type="text/javascript"><!--
/*==========================================================================
打上げ花火(1回毎)　By http://ijichi.easter.ne.jp/java5/hanastar2.htm（オリジナルJavaScript本サイトhttp://ijichi.easter.ne.jp/）
画像１回毎変化の参考： Flying Ring of Images By  http://www.fabulant.com.(2010 Peter Gehrig)
★IE専用を他ブラウザでも動作可能に改造。打上げ1回毎に画像変化へ。透過度他追加　2016/05/22
============================================================================*/
(function (){  //即時関数で囲んでグローバル変数を消すため、この行はこのままで

//★花火の画像指定。増減可能。画像を順番に"●",と区切って、いくつでも並べる。最後の ] の前には ,(カンマ) 無し
var hosi=["awa8.png","piku6.gif","soko16.gif","tt3a.png","soko22.gif","msk3.png"]; 
var myurl="";          //★上記用の花火の画像パス。文書とは別のフォルダーなどに入っている時は指定。全画像共通部分

var imgtama="sen.png"; //★打上げの玉の画像
var n=30;              //★表示させる花火画像の数。偶数で指定
var inZ=1;             //★画像や文章の上に流れるなら 1 。下に隠れるなら -1
var Pos="absolute";    //★スクロールで移動するか？　固定:fixed 　移動:absolute
var opa=0.7;           //★花火画像の透明度(0～1)　0で透明。 1で完全不透明。0は指定しない

//指定ここまで--------------------------------------------------------------------------------------------------
var j=0;//■1回ごと用追加
var xp0=0,yp0=0,p=0,k,m;
var xp=[],yp=[],i=[],l=[];
var len=hosi.length;//追加
var sss='';
/*■下記はdivで囲んでhosi[0]としないと１回毎に画像変化しない*/
for (m=0;m<n;m++){sss +='<div id="dot'+m+'" style="position:'+Pos+'; z-index:'+inZ+'; top:-200px; opacity:'+opa+';"><img src='+myurl+hosi[0]+'></div>';}
sss +='<div id="tama" style="position:'+Pos+'; z-index:'+inZ+';"><img src='+imgtama+'></div>';
document.write(sss);
function STAR_WARS3() {
var xpp=window.innerWidth, ypp=window.innerHeight, lt=window.pageXOffset, tp=window.pageYOffset;
xxpp=0.5*(0.5+0.9*Math.random())*xpp; yypp=0.4*(0.5+Math.random())*ypp;
var doc_x=lt+xxpp; var doc_y=tp+ypp*7/10;
xp0 =doc_x; yp0 =doc_y; 
STAR_WARS4();
}
function STAR_WARS4(){
tama.style.display="block";
if(yp0>yypp){
tama.style.top=yp0+"px"; tama.style.left=xp0+"px";
yp0=yp0-10;
var timerID=setTimeout(STAR_WARS4,50);
}else if(yp0<=yypp){
clearTimeout(timerID);
for (m=0;m<n;m++){document.getElementById("dot"+m).innerHTML="<img src="+myurl+hosi[j]+">";}/*■ここから１回毎分*/	
j++; if (j>=len) {j=0;}/*■ここまで１回毎分*/
STAR_WARS2();
}}
function STAR_WARS2() { 
tama.style.display="none";
for (m=0;m<n;m++){
if(m<(n/2)){
xp[m]=xp0+1*Math.cos(m*2*Math.PI/n*2); yp[m]=yp0-1*Math.sin(m*2*Math.PI/n*2);
i[m]=xp[m]-xp0; l[m]=yp[m]-yp0;
}else{
xp[m]=xp0+0.5*Math.cos(m*2*Math.PI/n*2); yp[m]=yp0-0.5*Math.sin(m*2*Math.PI/n*2);
i[m]=xp[m]-xp0; l[m]=yp[m]-yp0;
}}
k=10;   //はじけるスピード(最初)
p=0; STAR_WARS();
}
function STAR_WARS() {
p+=1;
for (m=0;m<n;m++){
var ob=document.getElementById("dot"+m).style; ob.top=yp[m]+"px"; ob.left=xp[m]+"px";
xp[m]=xp[m]+k*i[m];
yp[m]=yp[m]+k*l[m]+0;　//3は落下方向のスピード。0は落下しない。■原本0
k=k*0.994;             //はじけるスピードの減速係数。１以下で減速、１以上で加速
}
timerID=setTimeout(STAR_WARS,50); //50を小さくするとこまやかな動きになるが負荷が大きくなる。■原本40
if (p>=50) { p=50; clearTimeout(timerID); STAR_WARS3();}//この行の数値ははじけて消えるまでの時間。■原本20
}
STAR_WARS3();
}());//即時関数終了
// --></script>
<!--★コピーここまで-->

</body>
</html>
花火２■打上げ花火(画像)１回毎変化 最終修正日 : 2016/05/22

　花火２■打上げ花火(画像)１回毎変化　　　　最終修正日 : 2016/05/22
