JavaScriptで画像をブラウザいっぱいに飛び跳ねさせる技を使ってみては如何でしょうか。 「ネオンさん」のサイトで紹介されている技です。 まずは跳ねさせたい画像を１０個用意しましょう。ここで使っているカラーボールは 「あらたさんちのWWW素材集」でお借りしました。
さて、ＨＴＭＬ（JavaScript）の書き方ですが、ネオンさんとこでソースが公開されています。 ソースを見に行く時は“ココ”をポチッとね。 跳ねさせたい画像の名前をＨＴＭＬの中と一致させることをお忘れなく。
念の為に私の場合を示しておきます。
使う画像は drop01.gif、drop02.gif、drop03.gif〜〜drop09.gif ですので
<HTML>
<HEAD>
<SCRIPT language="JavaScript1.2">
<!--
//****以下の著作権コメントは消さないで下さい*******
c1=' Flying Chip-no2';
c2=' ＝made by neon (2000 (c) Nobuo Ishizu)＝';
c3=' http://www6.big.or.jp/~neon/';
//
gck = "g"; //m＝文字指定のとき、g＝画像指定のとき
kosu = 10; //下の１０個の文字や画像をいくつまで有効にするかを指定
//****文字指定(文字を指定）１０個まで可****
var tcl = new Array();
var tsz = new Array();
var tip = new Array();
//tcl=文字の色、tsz=文字サイズ（１〜７）、tip=文字
tcl[1] = 'ff0000' ;tsz[1] = 4 ;tip[1] = '★';
tcl[2] = 'ff6699' ;tsz[2] = 3 ;tip[2] = '■';
tcl[3] = '0099ff' ;tsz[3] = 2 ;tip[3] = '＊';
tcl[4] = '00ffcc' ;tsz[4] = 5 ;tip[4] = '●';
tcl[5] = 'ffcc66' ;tsz[5] = 2 ;tip[5] = '▲';
tcl[6] = '339933' ;tsz[6] = 4 ;tip[6] = '■';
tcl[7] = '0000cc' ;tsz[7] = 5 ;tip[7] = '★';
tcl[8] = '33cc00' ;tsz[8] = 3 ;tip[8] = '▲';
tcl[9] = '993399' ;tsz[9] = 5 ;tip[9] = '＊';
tcl[10] = '33ccff' ;tsz[10] = 2 ;tip[10] = '◆';
//****画像指定(画像名を指定）１０個まで可。アイコン程度の小さなものがよい****
var gyoko = new Array();
var gtate = new Array();
var gm = new Array();
//gyoko=横幅（ピクセル）、gtate=高さ（ピルセル）、gm=画像
//幅、高さが分らないよきは３０程度指定して下さい
gyoko[1]=32; gtate[1]=21; gm[1] = "drop01.gif";
gyoko[2]=25; gtate[2]=25; gm[2] = "drop02.gif";
gyoko[3]=25; gtate[3]=25; gm[3] = "drop03.gif";
gyoko[4]=25; gtate[4]=25; gm[4] = "drop04.gif";
gyoko[5]=35; gtate[5]=45; gm[5] = "drop05.gif";
gyoko[6]=25; gtate[6]=25; gm[6] = "drop06.gif";
gyoko[7]=25; gtate[7]=25; gm[7] = "drop07.gif";
gyoko[8]=25; gtate[8]=25; gm[8] = "drop08.gif";
gyoko[9]=25; gtate[9]=25; gm[9] = "drop09.gif";
gyoko[10]=32; gtate[10]=21; gm[10] = "drop01.gif";
//刻みの大きさ(大きいほど１回の飛びが大きくなる）
zz = 3;
//スピード（小さいほど速く動く）
tmspd = 50;
//*****************************************************
cmt2_1=c2.indexOf("Nobuo");
var spgofx,spgofy;
// ブラウザの判別
var IE4 = 0,NN4 = 0,NN6 = 0;
if (document.all) {
IE4 = true;
} else if (document.layers) {
NN4 = true;
} else if (document.getElementById) {
NN6 = true;
}
//ウインドウ幅、高さ取得（レイヤー別）
function getwd(lmn) {
var winwd = null;
if (NN4 || NN6) {
winwd = window.innerWidth - tipsz1[lmn] + pageXOffset;
spgofx = pageXOffset;
}
if (IE4) {
winwd = document.body.clientWidth - tipsz1[lmn] + document.body.scrollLeft;
spgofx = document.body.scrollLeft;
}
return winwd ;
}
function getht() {
var winht = null;
if (NN4 || NN6) {
winht = window.innerHeight - tipsz2[lmn] + pageYOffset;
spgofy = pageYOffset;
}
if (IE4) {
winht = document.body.clientHeight - tipsz2[lmn] + document.body.scrollTop;
spgofy = document.body.scrollTop;
}
return winht ;
}
cmt2_2=c2.indexOf("Ishizu");
//レイヤー作成準備
//Internet Explorer 4.0以上、Netscape6.0のとき
for (i=1; i<=kosu; i++) {
layid = "lay"+i;
if (IE4 || NN6) {
document.write('<DIV ID='+layid+' STYLE="position:absolute\;left:-50\;top:-50\;visibility:visible\;z-index:'+i+'">');
if (gck == "m") {
document.write('<FONT SIZE='+tsz[i]+' COLOR='+tcl[i]+'>'+tip[i]+'</FONT></DIV>');
}
else {
document.write('<IMG SRC='+gm[i]+'></DIV>');
}
}
//Netscape Navigator 4.0以上のとき
if (NN4) {
document.write('<layer name='+layid+' left=-50 top=-50 visibility="show" z-index='+i+'>');
if (gck == "m") {
document.write('<FONT SIZE='+tsz[i]+' COLOR='+tcl[i]+'>'+tip[i]+'</FONT></layer>');
}
else {
document.write('<IMG SRC='+gm[i]+'></layer>');
}
}
}
cmt3=c3.indexOf("neon");
//文字移動
var sowd=new Array();
var soht=new Array();
var stx=new Array();
var sty=new Array();
var edx=new Array();
var edy=new Array();
var oj = new Array();
var spd=new Array();
var kyorix=new Array();
var kyoriy=new Array();
var xkz=new Array();
var ykz=new Array();
var tipsz1=new Array();
var tipsz2=new Array();
var xysw=new Array();
var tmid;
var j;
//スタート処理
function tipst() {
for (j=1;j<=kosu; j++) {
lmn = "lay"+j;
if (gck == "m") {
tipsz1[lmn] = tsz[j]*6+2; //文字幅
tipsz2[lmn] = tsz[j]*6+2; //文字高さ
}
else {
tipsz1[lmn] = gyoko[j]; //画像幅
tipsz2[lmn] = gtate[j]; //画像高さ
}
sowd[lmn] = getwd(lmn) ;
soht[lmn] = getht(lmn) ;
stx[lmn] = Math.floor(0.5 * sowd[lmn]) ; //整数化切り捨て
sty[lmn] = Math.floor(0.5 * soht[lmn]) ; //整数化切り捨て
if (IE4) {
oj[lmn] = document.all(lmn).style;
oj[lmn].pixelLeft = stx[lmn]; //初期位置から真中へ（スタート地点）
oj[lmn].pixelTop = sty[lmn]; //初期位置から真中へ（スタート地点）
}
if (NN4) {
oj[lmn] = document.layers[lmn];
oj[lmn].left = stx[lmn]; //初期位置から真中へ（スタート地点）
oj[lmn].top = sty[lmn]; //初期位置から真中へ（スタート地点）
}
if (NN6) {
oj[lmn] = document.getElementById(lmn).style;
oj[lmn].left = stx[lmn]; //初期位置から真中へ（スタート地点）
oj[lmn].top = sty[lmn]; //初期位置から真中へ（スタート地点）
}
keisan(lmn);
}
tipsld();
}
//座標計算
function keisan(lmn) {
edx[lmn] = Math.floor((sowd[lmn]-tipsz1[lmn]+1)*Math.random()+tipsz1[lmn]); //整数化切り捨て
edy[lmn] = Math.floor((soht[lmn]-tipsz2[lmn]+1)*Math.random()+tipsz2[lmn]); //整数化切り捨て
kyorix[lmn] = Math.abs(stx[lmn]-edx[lmn])+2;
kyoriy[lmn] = Math.abs(sty[lmn]-edy[lmn])+2;
if (kyorix[lmn] < kyoriy[lmn]) {
xkz[lmn] = 1*zz;
ykz[lmn] = Math.ceil(kyoriy[lmn]/kyorix[lmn])*zz; //x１pixelに対するyの１目盛り
}
else {
ykz[lmn] = 1*zz;
xkz[lmn] = Math.ceil(kyorix[lmn]/kyoriy[lmn])*zz; //y１pixelに対するxの１目盛り
}
//移動先座標(-,-)のとき
if (edx[lmn] < stx[lmn] && edy[lmn] < sty[lmn]) {xysw[lmn] = "mm";}
//移動先座標(+,+)のとき
if (edx[lmn] >= stx[lmn] && edy[lmn] >= sty[lmn]) {xysw[lmn] = "pp";}
//移動先座標(+,-)のとき
if (edx[lmn] >= stx[lmn] && edy[lmn] < sty[lmn]) {xysw[lmn] = "pm";}
//移動先座標(-,+)のとき
if (edx[lmn] < stx[lmn] && edy[lmn] >= sty[lmn]) {xysw[lmn] = "mp";}
}
//スライド処理
function tipsld() {
for (j=1;j<=kosu; j++) {
lmn = "lay"+j;
rszsor(lmn);
//移動先座標(-,-)のとき
if (xysw[lmn] == "mm") {
stx[lmn] = stx[lmn] - xkz[lmn];
sty[lmn] = sty[lmn] - ykz[lmn];
if (stx[lmn] < 2+spgofx) {
stx[lmn] = 2+spgofx;
keisan(lmn);
} else if (sty[lmn] < 2+spgofy) {
sty[lmn] = 2+spgofy;
keisan(lmn);
}
}
//移動先座標(+,+)のとき
if (xysw[lmn] == "pp") {
stx[lmn] = stx[lmn] + xkz[lmn];
sty[lmn] = sty[lmn] + ykz[lmn];
if (stx[lmn] > sowd[lmn]) {
stx[lmn] = sowd[lmn];
keisan(lmn);
} else if (sty[lmn] > soht[lmn]) {
sty[lmn] = soht[lmn];
keisan(lmn);
}
}
//移動先座標(+,-)のとき
if (xysw[lmn] == "pm") {
stx[lmn] = stx[lmn] + xkz[lmn];
sty[lmn] = sty[lmn] - ykz[lmn];
if (stx[lmn] > sowd[lmn]) {
stx[lmn] = sowd[lmn];
keisan(lmn);
} else if (sty[lmn] < 2+spgofy) {
sty[lmn] = 2+spgofy;
keisan(lmn);
}
}
//移動先座標(-,+)のとき
if (xysw[lmn] == "mp") {
stx[lmn] = stx[lmn] - xkz[lmn];
sty[lmn] = sty[lmn] + ykz[lmn];
if (stx[lmn] < 2+spgofx) {
stx[lmn] = 2+spgofx;
keisan(lmn);
} else if (sty[lmn] > soht[lmn]) {
sty[lmn] = soht[lmn];
keisan(lmn);
}
}
if (IE4) {
oj[lmn].pixelLeft = stx[lmn] ;
oj[lmn].pixelTop = sty[lmn] ;
}
if (NN4) {
oj[lmn].moveTo(stx[lmn],sty[lmn]);
}
if (NN6) {
oj[lmn].left = stx[lmn] ;
oj[lmn].top = sty[lmn] ;
}
}
tmid = setTimeout("tipsld()",tmspd);
}
//リサイズ用再計算
function rszsor(lmn) {
rzsowd = getwd(lmn) ;
rzsoht = getht(lmn) ;
if (sowd[lmn] != rzsowd || soht[lmn] != rzsoht) {
sowd[lmn] = rzsowd;
soht[lmn] = rzsoht;
}
}
//アクション起動
function tipact() {
if (cmt2_1 == -1 || cmt2_2 == -1 || cmt3 == -1) {
alert("Don't delete Copyright comment ! ");
} else {
setTimeout("tipst()",1000);
}
}
// -->
</SCRIPT>
</HEAD>
<BODY onLoad="tipact()">
ボールが飛び跳ねるページです。
</BODY></HTML>
|
こんな感じです。
えっ！？ ボール以外の変な画像が飛び跳ねてるって？？...
んまあ、そういう細かいことは触れないで（＾＾；お試しくださいませ。
ＨＴＭＬ文と画像データが同じフォルダに入るようご注意ください。同じフォルダ内でも 画像用のフォルダ（例えば、pictという名前の画像フォルダ）を作って入れた場合は上記の
gyoko[1]=32; gtate[1]=21; gm[1] = "drop01.gif";という書き方の部分は
gyoko[1]=32; gtate[1]=21; gm[1] = "pict/drop01.gif";という形になることをお忘れなく。（以下drop02から09まで同じ）
. . . . . . 
. . . . . . 