！DOCTYPE htmlとするとjavascriptが動作しない。この記述HTML5では、”ｐｘ”を付けないと正常にならないとのこと。
setTimeout関数はこう使うのかと目からうろこだな。リカーシブコールになってるけど問題ないのか・・・。ちょっと分からないな。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>画像移動</title>
<script >
x1 = 10;
y1 = 10;
x2 = 80*2;
y2 = 100*2;
step = 1;
dx = x2 - x1;
dy = y2 - y1;
if (dx > dy) a = dy / dx; else a = dx / dy;
x = x1;
y = y1;
function moveImg()
{
flag = true;
if (dx > dy)
{
x = x + step;
y = a * x;
if (x > x2) flag = false;
}else{
y = y + step;
x = a * y;
if (y > y2) flag = false;
}
//--注） <!DOCTYPE html>の宣言の場合 "px"をくっ付けないと動作しないように見える。
document.myIMG.style.left = x + "px";
document.myIMG.style.top = y + "px";
if (flag) setTimeout("moveImg()",50);
}
</script>
</head>
<body topmargin="0" leftmargin="0" backgroung-color:"black">
<a href="javaScript:moveImg()">移動</a>
<img src="moon.png" name="myIMG" style="position:absolute;top:20px;left:10px;"><br>
<img src="moontrans.png" style="position:absolute;top:100px;left:80px;"><br>
<br><br><br><br>
</body>
</html>
No tags for this post. 