Question

我有一个.gif动画从屏幕左边开始动画到右边几百个像素。动画持续5秒，我已将其设置为不会返回其初始位置。

我想要的是.gif在CSS动画结束后启动。我意识到一些论坛会为鼠标悬停效果提供代码，以便它从动画的.jpg源变为.gif。但我找不到任何能给你一个计时器而不是鼠标悬停的东西。

自从我在网站上工作已经有几年了，我已经忘了这么多，所以这一直是一场斗争。

感谢任何帮助。干杯。

Answer 1

通过javascript更改<img>来源的方法非常简单，语法类似于img.src = "new/source.gif"。

对GIF的更改与动画结束的匹配可以通过多种方式实现，但我会通过在您设置超时的同时将动画添加到元素中来实现你的javascript。

<强> 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();

设置gif的计时器以启动

1 个答案: