GIF 시작 타이머 설정

화면의 왼쪽부터 수백 픽셀 오른쪽으로 움직이기 시작하는 .gif 파일이 있습니다. 애니메이션은 5 초 동안 지속되며 초기 위치로 돌아 가지 않도록 설정했습니다.GIF 시작 타이머 설정

내가 원하는 것은 CSS 애니메이션이 끝나면 .gif를 시작하는 것입니다. 일부 포럼에서는 마우스 오버 효과에 대한 코드를 제공하므로 애니메이션의 .jpg 소스에서 .gif로 변경됩니다. 그러나 마우스 오버 대신 타이머를 제공하는 것을 찾을 수 없습니다.

나는 웹 사이트에서 일한 이후로 너무 많은 것을 잊어 버렸습니다. 그래서 이것은 투쟁이었습니다.

도움을 주시면 감사하겠습니다. 건배.

출처

2017-02-11 Ko24be

자바 스크립트를 통해 <img> 소스를 변경하는 방법은 매우 간단합니다. 구문은 img.src = "new/source.gif"처럼 보입니다.

GIF가 애니메이션의 끝과 일치하면 다양한 방법으로 달성 할 수 있지만 시간을 설정하는 동시에 클래스로 요소에 애니메이션을 추가하면됩니다 귀하의 자바 스크립트에서.

HTML

<img id="image" src="path/to/static.jpg">

JAVASCRIPT

var img = document.getElementById("image"); 

function photoSwitch(){ 

    // begin your CSS animation by applying class 
    img.setAttribute("class", "some-animation"); 

    // have javascript wait 5s before switching the image source 
    setTimeout(function(){ 
     img.src = "path/to/moving.gif"; 
    },5000); 
} 

photoSwitch();

출처

2017-02-11 11:55:55

이 작동하지 않는 것 같습니다. 나는 모든 것이 옳았다는 것을 확신하지만, "some-animation"에 무엇을 추가 할 것인지 확신 할 수 없다. 감사! – Ko24be

Nvm, 내가 잘못하고있는 것은 hha의 머리 대신 javascript에

답변

관련 문제