简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
javascript - Utilisation de JS pour modifier l'attribut position d'un élément, pourquoi style.left fonctionne-t-il mais style.top échoue-t-il?
PHP中文网
PHP中文网 2017-05-19 10:38:38
0
1
625

Q. Je souhaite utiliser la fonction de déplacement dans JS pour déplacer la ligne diagonale de la petite image vers le bas, mais le code est presque le même. La gauche peut être déplacée, mais le haut ne peut pas être déplacé. 

<!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级讲师

répondre à tous(1)
给我你的怀抱
给我你的怀抱2017-05-19 10:40:38 1 plancher 
<!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>

J'espère que vous écrirez du code JS en stricte conformité avec les normes du W3C.

Comme +0
Ajouter une réponse
Sujets populaires
Plus>
Articles populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois：Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！