便利eelife Java Script

   戻る

画像がズームUPします 複数。

スタート




サンプルソース
<!--HTMLタグ </HEAD>の下に挿入してください。-->
<BODY onload="Preload()">
<P title="画像をクリックすると止ります"><IMG src="dummy.gif" name="myIMG" style="position:absolute;
top : 1px;
left : 1px;" border="0" onclick="Default(false)"></P>
<P><A href="javascript:move_img()" title="画像をクリックすると止ります">スタート</A></P>

</BODY>
<!--Javascript <HEAD>と</HEAD>の間に挿入してください。 -->
<SCRIPT language="JavaScript">
<!--eelife
v=0;
loadImg = new Array ("siksou24.gif","3light.gif","colorbook.gif");

function Preload(){ //画像を読み込みます
for (i = 0; i < loadImg.length; i++){
document.images["myIMG"].src = loadImg[i];
}
myObj = document.images["myIMG"];

format();
}

function format(){
flag=true;
v%=loadImg.length;  //配列 loadImgの配列要素の数 vは0から2を繰り返します。
myObj.src = loadImg[v];
v++;
i=0;
img_Top=300;  //画像を表示する上から位置(垂直座標)
img_Left=300; //画像を表示する左から位置(画像の水平座標)
img_Width=300; //ズームUPする最大の大きさ
myObj.style.top = img_Top;
myObj.style.left = img_Left;
myObj.width = 0; //画像の幅 初期値
myObj.height = 0; //画像の高さ 初期値
}

function move_img(){ //画像のズームUP
img_Top=img_Top-0.5;
img_Left=img_Left-0.5;
myObj.width = i; //画像の幅,高さが i ずつ増加します
myObj.height = i;
myObj.style.top = img_Top; //画像を表示する上から位置(垂直座標)
myObj.style.left = img_Left; //画像を表示する左から位置(画像の水平座標)
i+=3;
if(i<img_Width){
tmrID = setTimeout("move_img()",1);
}
else{Default();}
}

function Default(flag){ //元に戻す
window.clearTimeout(tmrID); // tmrID を止めます。
tmrID = null;
format();
if(flag==false) return;
move_img();
}


// -->
</SCRIPT>
コメント