简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
javascript - Menggunakan JS untuk mengubah suai atribut kedudukan sesuatu elemen, mengapa style.left berfungsi tetapi style.top gagal?
PHP中文网
PHP中文网 2017-05-19 10:38:38
0
1
633

Q. Saya ingin menggunakan fungsi move dalam JS untuk mengalihkan garis pepenjuru gambar kecil ke bawah, tetapi kodnya hampir sama, tetapi bahagian atas tidak boleh digerakkan 

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

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

Saya harap anda akan menulis kod JS dengan ketat mengikut piawaian W3C.

Suka +0
Tambah Balasan
Topik popular
Lagi>
Artikel popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina：Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！