简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
javascript - Using JS to modify the position attribute of an element, why is style.left feasible but style.top invalid?
PHP中文网
PHP中文网 2017-05-19 10:38:38
0
1
632

Q. I want to use the move function in JS to move the diagonal line down of the small picture, but the code is almost the same. The left can be moved, but the top cannot be moved.

<!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中文网
PHP中文网

认证0级讲师

reply all(1)
给我你的怀抱
给我你的怀抱2017-05-19 10:40:38 1 floor 
<!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>

I hope you will write JS code strictly in accordance with W3C standards.

Like +0
Add Reply
Popular Topics
More>
Popular Articles
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！