Анимация 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

ответ

Смежные вопросы