Question

如果我有一个动画GIF从左到右，如何通过javascript切换gif从右到左？我有它工作但我不知道如何停止GIF并将其切换到另一个gif从右到左。它只是从左到右和从左到左循环相同的gif。反向gif是ani_catrev.gif。

   <html>
     <head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     <title>Cat running</title>
     <style type="text/css">
     #container {
    background:url(catBack1200.jpg) no-repeat;
    width:1200px;
    height:440px;
}
#catbox {
    position:absolute;
    top:330px;
    left:10px;
}
</style>
<script type="text/javascript">
    var switchDirection = false;
function doAnimation() {
var catbox = document.getElementById("catbox");
var currentLeft = catbox.offsetLeft;
var newLocation;
if (switchDirection == false)
{
newLocation = currentLeft + 5;
if (currentLeft >= 1000)
{
switchDirection = true;
}
}
else
{
newLocation = currentLeft - 5;
if (currentLeft <= 0)
{
switchDirection = false;
}
}
catbox.style.left = newLocation + "px";
}
</script>
</head>

<body onload="setInterval(doAnimation, 10)"> 
<div id="container">
<div id="catbox">
    <img src="ani_cat.gif" id="cat" width="100" height="60" alt="busy kitty" />
</div>
</div>
</body>
</html>

Answer 1

您需要获得对猫图像的引用：

var catimg = document.getElementById("cat");

您可以将这行代码放在var catbox的声明下。接下来，if（switchDirection == false）中的第一行代码应为：

if (catimg.src != 'ani_cat.gif') catimg.src = 'ani_cat.gif';

并在switchDirection子句的else部分内：

if (catimg.src != 'ani_catrev.gif') catimg.src = 'ani_catrev.gif';

以下是该功能的外观：

function doAnimation() {
    var catbox = document.getElementById("catbox");
    var catimg = document.getElementById("cat");
    var currentLeft = catbox.offsetLeft;
    var newLocation;

    if (switchDirection == false)
    {
        newLocation = currentLeft + 5;
        if (catimg.src != 'ani_cat.gif') catimg.src = 'ani_cat.gif';

        if (currentLeft >= 1000)
        {
            switchDirection = true;
        }
    }
    else
    {
        newLocation = currentLeft - 5;
        if (catimg.src != 'ani_catrev.gif') catimg.src = 'ani_catrev.gif';

        if (currentLeft <= 0)
        {
            switchDirection = false;
        }
    }

    catbox.style.left = newLocation + "px";
}

使用javascript动画图片

1 个答案: