画像を徐々に大きくする |
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= で、画像の初期値を指定しています。 |