ふわふわ■中心点４　画像が噴き出す１

■文字が噴き出すJavaScriptはこちら→　ふわふわ■中心点■３　光（文字）が噴き出す１

上記の文字を画像に変更して作成した、指定場所から自動で大量の複数種類の画像が噴き出すJavaScriptです。
上記の文字の見本では、位置指定は自由指定を選択したので、スクロールすると、噴き出しが見えなくなります。
今回は、固定指定を選択しました。だからスクロールしても、噴き出し位置が変わりません。
それに合わせるために、背景画像も固定指定にしました。

原本（宇宙空間２）をHTML5対応にし、いろいろ追加しました。
・噴き出す文字を、複数種類の画像へ変更。
・噴き出す画像の位置が、スクロールしても固定指定だったのを、固定と自由の選択可能へ。
・噴き出す画像の位置を上から1/2、左から2/3という分数形式で、指定可能へ。
・透過指定追加。
原本はHIMAJINから。

■HTML5では問題ないのですが、HTML4ではブラウザFirefoxのみ、画面一杯に中身（空間）が無いと、中身のある部分だけでしか動作しません。その対応策として、CSSでbodyにwidth:100%;height:100%;指定がしてあります。

ht14.png

ht15.png

ht18.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>ふわふわ■中心点４　画像が噴き出す１</title>

<!--★コピーここから。背景画像指定は必須ではありません。お好みで-->
<style type="text/css"><!--
body{
width:100%; height:100%;/*★HTML4時のブラウザForefox対策用。画面一杯に中身が無いと動作しないため*/
background:url(gat200.jpg) #fde;/*★背景画像と背景色指定*/
background-repeat:no-repeat;/*★背景画像は１枚のみ表示指定*/
background-size:auto 100%;/*★背景画像の、画面縦幅一杯の指定。背景画像の実寸は横479px縦800px*/
background-attachment:fixed;/*★背景画像の位置固定指定*/
}
--></style>
<!--★コピーここまで。bodyにもコピー有り-->

</head>
<body>

<!--★ここからコピー　位置は<body>の中です-->
<script type="text/javascript"><!--
/*==============================================================================
画像が噴き出す By http://himajin.moo.jp/freejava/starwars2.html(サイト：himajin.moo.jp)
★HTML5対応にし、文字を画像の複数指定へ、位置自由指定、ボカシ用影、透過等追加。2015/04/11
================================================================================*/
var hosi=new Array; //★噴き出す画像指定。増減可能
hosi[0]="../mouse/ht14.png";
hosi[1]="../mouse/ht15.png";
hosi[2]="../mouse/ht18.png";

var posi="fixed";   //★噴き出す画像の位置指定。スクロールしても固定ならfixed　スクロールして移動するならabsolute
var Wps=1/6;        //★噴き出す位置の左からの位置。全画面の分数指定。1/2にすると中央になります
var Hps=1/4;        //★噴き出す位置の上からの位置。全画面の分数指定。2/3にすると下側に寄ります
var opa=0.6;        //★噴き出す画像の透明度(0～1)　0で透明。 1で完全不透明。0は指定しない
var spd=50;         //★噴き出す速度。原本40。数値が小さいほど速い
var starint=20;     //★噴き出す画像表示数 

//------------------指定項目以上------------------------------------------------------------------------
var i=0;
for (i = 0; i < starint; i++) {
document.write("<div style='position:"+posi+"; z_index:2;opacity:"+opa+";'id='star"+i+"'><img src='"+ hosi[(i%hosi.length)]+"' border='0'></div>");
}
var x=new Array(), y=new Array(),scrnx=new Array(),scrny=new Array();
var dbw=document.documentElement.clientWidth-50;
var dbh=document.documentElement.clientHeight-50;
for (i = 0; i < starint; i++) {do{n=0;
x[i]=(Math.floor(Math.random()*100)-50)/10;
y[i]=(Math.floor(Math.random()*100)-50)/10;
if(!x&&!y)n++} while (n);
scrnx[i]=dbw*Wps+x[i]*5; scrny[i]=dbh*Hps+y[i]*5;
}
function momeShow(){
for (i = 0; i < starint; i++) {
document.getElementById("star"+i).style.top=scrny[i]+"px";
document.getElementById("star"+i).style.left=scrnx[i]+"px";
if(dbw-40<scrnx[i] || 0>scrnx[i] || dbh-40<scrny[i] || 0>scrny[i]){scrnx[i]=dbw/2;scrny[i]=dbh/2;
do{n=0;
x[i]=(Math.floor(Math.random()*100)-50)/10;
y[i]=(Math.floor(Math.random()*100)-50)/10;
if(!x&&!y)n++} while (n);
scrnx[i]=dbw*Wps+x[i]*5; scrny[i]=dbh*Hps+y[i]*5;
}
else{scrnx[i]+=x[i];scrny[i]+=y[i];x[i]=x[i]*1.1;y[i]=y[i]*1.1;}
}}
setInterval('momeShow()',spd);
// --></script>
<!--★ここまでコピー-->

<br><br><br>
</body>
</html>

中心点４ 画像が噴き出す１ UP日時 : 2015/04/11

　中心点４　画像が噴き出す１　　　　UP日時 : 2015/04/11