画像を徐々に大きくする
|
| Sample |
|
ここをクリックして新しいウインドウを開いてください。
|
| ソース |
<HTML>
<HEAD>
<TITLE>JavaScript</TITLE>
<SCRIPT language="JavaScript">
<!--
var w=0;
var xw,yh;
var max_size=230;
function zoom_in(){
if (Math.floor(document.img1.width)<max_size) {
xw =document.img1.width;
yh =document.img1.height;
w=Math.floor(xw)+4;
h=Math.floor(w);
document.img1.height=h;
document.img1.width=w;
}
else if (Math.floor(document.img1.width)>max_size) {
w=max_size;
h=Math.floor(w);
document.img1.height=h;
document.img1.width=w;
}
setTimeout("zoom_in()",1);
}
//-->
</SCRIPT>
</HEAD>
<BODY BGCOLOR=#ffffff TOPMARGIN=40 MARGINHEIGHT=40 LEFTMARGIN=40 MARGINWIDTH=40 onLoad="zoom_in()">
<center>
<table border=0>
<tr><td width=300 height=300 valign=middle align=center>
<img src=ball.jpg border=0 NAME="img1" width=10 height=10>
</td></tr></table>
</center>
<br><br>
<FORM>
<INPUT TYPE=button VALUE="ウインドウを閉じる" onClick=window.close()>
</FORM>
</body></html>
|
| ワンポイント解説 |
|
w=Math.floor(xw)+4; で、画像のサイズを大きくしています。 値の4を6とか8とかにすると、大きくなるスピードが早くなります。 img src=ball.jpg *** width= で、画像の初期値を指定しています。 |