1

我想使用 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";
}

不幸的是 js 不起作用，我不知道为什么。我已经检查过并且 animacja 函数运行但是图像没有改变它的位置。

4

2 回答 2

3

您的代码中有一个小错误..

最初由于未定义left property元素的，它是空的。所以返回NaN..parseInt

只需添加一个额外的检查条件。

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";
}​

检查小提琴

于 2012-11-28T20:31:27.510 回答
0

您的问题是obj.style仅包含有关style标签中指定的样式的信息，而不包含其他样式表中指定的样式，例如您的<style>标签。因此，obj.style.left是空字符串，并parseInt('')产生NaN。

相反，在标签的属性中定义您的left样式属性：style<img>

<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-28T20:34:16.587 回答