6

我有一个播放一次（不循环）的动画 GIF。我希望它在单击时动画。我试过这样的事情：

 $('#plus').click(function(){
    $('#plus').attr('src','');
    $('#plus').attr('src','img/plus.gif')
 });

希望快速重置src会触发动画，但没有运气。有谁知道会怎么做？

4

6 回答 6

8

尝试使用随机生成的查询字符串添加图像，使其在浏览器中看起来像新图像。

<script language="javascript" type="text/javascript">
function randomString() {
    var chars = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXTZabcdefghiklmnopqrstuvwxyz";
    var string_length = 8;
    var randomstring = '';
    for (var i=0; i<string_length; i++) {
        var rnum = Math.floor(Math.random() * chars.length);
        randomstring += chars.substring(rnum,rnum+1);
    }
    document.randform.randomfield.value = randomstring;
}
$('#plus').click(function(){
    $('#plus').attr('src','img/plus.gif?x=' + randomString())
    });
</script>
于 2010-10-21T15:34:53.153 回答
2 
function refreshSrc(who){
    return who.src= who.src.split('?')[0]+'?='+(+new Date());
}
refreshSrc(document.images[0])

如果您愿意，可以使用 jQuery 语法来启动它。

于 2010-10-21T16:57:41.373 回答
1

这是一种替代方法。

您可以将各个帧导出为它们自己的图像并通过 javascript 处理动画。

它可以让你做一些很酷的事情。一位同事最近有一个小计时器动画，它与我们图片库中的可配置幻灯片间隔同步。

您从中得到的另一件事是您可以使用 png 并具有半透明背景。

那里可能有一个用于javascript的精灵动画库:)

于 2010-10-21T15:52:10.433 回答
0

对于那些想要在它滚动到视图时执行此操作的人，我做了以下操作。

append.js 的链接：https ://github.com/morr/jquery.appear

$('img.large-magnify-glass-animation').appear(function() {
    $(this).delay(200, function(){
        $(this).attr('src','http://example.com/path/to/gif.gif');
    });
});

在短暂的延迟后，我刚刚通过 attr('src') 加载了相同的 gif。没有时间戳或随机字符功能。刚刚使用了出现插件。

于 2014-08-06T17:21:52.360 回答
0

您是否尝试过删除 img 标签并重新添加它？（从未尝试过，只是一个想法）

于 2010-10-21T15:32:26.810 回答
0

您可以尝试使用单帧图像（动画的第一帧）并在单击时显示/隐藏每个图像。如果您希望在动画完成后将其重置为单帧图像，您可以使用 setTimeout（以动画的长度作为时间长度）并让它隐藏动画并显示静态图像。

于 2010-10-21T15:34:32.297 回答