Q.想利用JS中的move函數實現小圖的斜線下移，但是明明代碼幾乎一樣，left的移動可以實現，top卻怎麼也動不了 {代碼...}

javascript - 利用JS修改元素的位置屬性，為什麼style.left可行而style.top失效？

Q.想利用JS中的move函數實現小圖的斜線下移，但是明明程式碼幾乎一樣，left的移動可以實現，top卻怎麼也動不了

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>台球桌</title>
<style type="text/css">
*{
    padding:0;
    margin:0;
}
p{
    background:url(../PICTURE/table.JPG) no-repeat;
    height:260px;
    width:465px;
}
#ball{}
</style>
<script>
function init(){
    var timer = setInterval("move()",50);    
}
function move(){
    var ball = document.getElementById("ball");
    left = parseInt(ball.style.left);
    left += 1;
    top = parseInt(ball.style.top);
    top += 1;
    ball.style.left = left + "px";
    ball.style.top = top + "px";    
}
</script>
</head>

<body onload="init()">
<p>
<img src="../PICTURE/ball.png" id="ball" style="position:absolute;left:6px;top:5px;"/>
</p>
</body>
</html>

PHP中文网2728 天前634

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>top</title> </head> <body> <p style="width: 100px;height: 100px;position: absolute;top: 10px;left: 10px;background-color: #1b6d85" id="ball"></p> <script type="text/javascript"> function init(){ setInterval("move()",100); } function move(){ var ball = document.getElementById("ball"); var left = parseInt(ball.style.left); left += 1; var top = parseInt(ball.style.top); top += 1; ball.style.left = left + "px"; ball.style.top = top + "px"; } init(); </script> </body> </html>

javascript - 利用JS修改元素的位置屬性，為什麼style.left可行而style.top失效？

全部回覆(1)我來回復