ふわふわ■花火１　打上げ花火(画像)

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

</head>
<body>

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

//★花火の画像指定。増減可能。画像を順番に"●",と区切って、いくつでも並べる。最後の ] の前には ,(カンマ) 無し
var hosi=["pe1.gif","pe2.gif","pe3.gif","pe4.gif"]; 
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 xp0=0,yp0=0,p=0,k,m;
var xp=[],yp=[],i=[],l=[];
var len=hosi.length;//追加
var sss='';
for (m=0;m<n;m++){sss +='<img src='+myurl+hosi[m%len]+' id="dot'+m+'" style="position:'+Pos+'; z-index:'+inZ+'; top:-200px; opacity:'+opa+';">';}
sss +='<img src='+imgtama+' id="tama" style="position:'+Pos+'; z-index:'+inZ+';">';
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);
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
