Question

我想使用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函数运行但是图像没有改变它的位置。

Answer 1

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

最初，由于元素的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

Answer 2

您的问题是obj.style仅包含有关style标记中指定的样式的信息，其他样式表中指定的非样式，例如{{1} } 标签。因此，<style>为空字符串，obj.style.left为parseInt('')。

相反，在NaN代码的left属性中定义您的style样式属性：

<img>

或，如果将样式分开（例如遵守某些设计标准）非常重要，您可以使用window.getComputedStyle函数找出对象的实际{{ 1}}样式值：

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

setInterval动画

2 个答案: