一個gif的動畫反轉到另一個gf

我有一個從左到右運行的貓的動畫gif，然後轉身從右向左跑。好像我的代碼中的所有內容都是正確的。在我複雜的代碼之前，它似乎工作得很完美，但是GIF在移動時被凍結了。現在我已經修改了我的代碼，但現在gif並沒有反轉到其他gif。它只是從左到右運行，然後向後運行。我似乎無法在我的代碼中發現任何錯誤。有人可以幫忙嗎？一個gif的動畫反轉到另一個gf

<html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>test</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 catimg = document.getElementById("cat"); 
    var currentLeft = catbox.offsetLeft; 
    var newLocation; 

    if (switchDirection == false) 
    { 
     newLocation = currentLeft + 3; 
     catimg.src == "ani_cat.gif"; 

     if (currentLeft >= 600) 
     { 
      switchDirection = true; 
     } 
    } 
    else 
    { 
     newLocation = currentLeft - 3; 
     catimg.src == "ani_cat_rev.gif"; 

     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>

來源

2013-10-13 2Truth

設置圖像時，使用'='而不是'=='我想這將是錯字。

不要在每個動畫上設置src。而是在切換時設置它：

if (switchDirection == false) { 
    newLocation = currentLeft + 3; 

    if (currentLeft >= 600) { 
     catimg.src = "ani_cat_rev.gif"; 
     switchDirection = true; 
    } 
} else { 
    newLocation = currentLeft - 3; 

    if (currentLeft <= 0) { 
     catimg.src = "ani_cat.gif"; 
     switchDirection = false; 
    } 
}

來源

2013-10-13 14:54:42

第一次工作，但當循環它倒退，不會來回跑來跑去 – 2Truth

我測試了jsfiddle與2動畫圖像，它工作正常。可能您的圖片加載需要時間。嘗試增加動畫間隔。你有任何演示運行的問題？ –

NM工作，謝謝....你的權利 – 2Truth

catimg.src == "ani_cat.gif"; 
catimg.src == "ani_cat_rev.gif";

這裏也許是問題：您使用了相同操作==，而不是=。

來源

2013-10-13 14:46:39 ohmygirl

已經嘗試過。沒有運氣 – 2Truth

的工作，但GIF凍結 – 2Truth

一個gif的動畫反轉到另一個gf

回答

相關問題