자바 스크립트 코드 루핑 없음

안녕하세요 모두 저는 자바 스크립트 & CSS를 사용하여 스프라이트 애니메이션을 만들었지 만 애니메이션을 반복하지는 않습니다. 이미지의 끝에 도달하면 이미 빈 이미지로 바뀝니다.자바 스크립트 코드 루핑 없음

<html> 
<head> 
    <style type="text/css">   
     .container 
     { 
      width: 512px; 
      height: 512px; 
      overflow: hidden; 
     }  
    </style> 

    <script type='text/javascript'>  
     document.onreadystatechange = function() 
     { 
      if (document.readyState == "complete") 
      { 
       setInterval(next, 100); 
      } 
      else 
      { 
       return false; 
      } 
     } 

     var frame = 1; 

     function next() 
     { 
      var left = 512 * frame;  
      var top = 0; 
      var elementStyle = document.getElementById('image').style; 

      elementStyle.position = "relative"; 
      elementStyle.top = '-'+top+'px'; 
      elementStyle.left = '-'+left+'px'; 

      frame++; 
     } 
    </script>  
</head>  
<body>  
    <div class="container"> 
     <img id="image" src="flame_sprite.png" /> 
    </div> 
</body> 
</html>

이 내가 코드를 테스트하는 데 사용하고 사진입니다 : 여기

내 코드의

친절 http://www.thecave.info/wp-content/uploads/2014/08/flame_sprite.png

내 코드에 어떤 문제가 있는지 나에게 설명도 만약 사람 고칠 수 있도록 도와 줘서 고맙습니다.

출처

2014-12-08 sa.lva.ge

그림에 6 개의 프레임이 있습니다. 루프를 반복해야하고 if(frame == 6) frame = 0;을 추가하여 애니메이션을 다시 시작하십시오.

function next() 
{ 
    if(frame == 6) frame = 0; 

    var left = 512 * frame; 

    var top = 0; 

    var elementStyle = document.getElementById('image').style; 

    elementStyle.position = "relative"; 

    elementStyle.top = '-'+top+'px'; 

    elementStyle.left = '-'+left+'px'; 

    frame++; 

}

표시 결과 : http://jsfiddle.net/59yhuk8L/

출처

2014-12-08 10:02:57

프레임을 계산되지 않은 방법은 무엇입니까? –

그렇지 않으면 그림의 너비를 테스트 할 수 있습니다 –

너비 테스트의 의미는 무엇입니까? –

자바 스크립트 코드 루핑 없음

답변

관련 문제