setInterval動畫

我想使用setInterval製作動畫。圖像必須從左至右改變其位置。setInterval動畫

HTML：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 
<head> 
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> 
    <title>animacja</title> 
    <style type="text/css"> 
    #obrazek 
    { 
     position: relative; 
     left: 1px; 
    } 
    </style> 
    <script type="text/javascript" src="animacja.js"></script> 

</head> 
<body> 
    <img src="smile.jpg" id="obrazek" alt="Usmiech" width="100" height="100" /> 
</body> 
</html>

的JavaScript：

window.onload = inicjuj; 


function inicjuj() 
{ 
    setInterval(function(){animacja();},1000); 
} 

function animacja() 
{ 
    var obj = document.getElementById("obrazek"); 
    var wartosc = parseInt(obj.style.left, 10); 
    obj.style.left = (wartosc + 10) + "px"; 
}

Unfortunalety JS不工作，我不知道爲什麼。我已經檢查過，並且animacja函數運行，但是圖像沒有改變它的位置。

來源

2012-11-28 catchmeifyoucan

@FrédéricHamidi無論位置的值如何，它也不起作用:( – catchmeifyoucan

您的問題是obj.style只包含有關在style標籤中指定的款式，在其他樣式表指定不風格，像你<style>標籤信息。因此，obj.style.left是空字符串，並且parseInt('')產生NaN。

相反，在<img>標籤的style屬性來定義你的left樣式屬性：

<img ... style="left:1px;" />

或者，如果要保持風格的獨立是非常重要的（例如，要堅持一些設計標準），您可以使用window.getComputedStyle函數來計算出對象的實際left樣式值：

function animacja() 
{ 
    var obj = document.getElementById("obrazek"); 
    var wartosc = parseInt(getComputedStyle(obj).left, 10); 
    console.log(parseInt(getComputedStyle(obj).left, 10)) 
    obj.style.left = (wartosc + 10) + "px"; 
}

來源

2012-11-28 20:34:16 apsillers

你有一個小錯誤在你的代碼..

最初作爲元素的left property是沒有定義，它是空的。因此parseInt返回NaN ..

只需添加一個額外的檢查條件。

window.onload = inicjuj; 


function inicjuj() 
{ 
    setInterval(animacja,1000); 
} 

function animacja() 
{ 
    var obj = document.getElementById("obrazek"); 
    var left = obj.style.left; 
    if(left === ''){ 
     left = 0; 
    } 
    var wartosc = parseInt(left, 10); 
    obj.style.left = (wartosc + 10) + "px"; 
}

Check Fiddle

來源

2012-11-28 20:31:27

回答

相關問題