单击文本链接时重新启动 GIF 动画答案

【问题标题】：Restart a GIF animation when you click on a text link单击文本链接时重新启动 GIF 动画
【发布时间】：2015-07-30 00:43:19
【问题描述】：

我想在网页中显示一些 GIF 动画。想象一下一个由 GIF 组成的图片库，它只播放一次然后就冻结了 :) 每次单击文本链接时，我都想重新启动他们的动画。我更新了我在这里找到的一个 jsfiddle，它可以满足我的要求，但是当我点击 GIF，而不是文本链接时。

假设我有 4 个 GIF，我想要类似的东西：

restart1 text link - GIF1 image
restart2 text link - GIF2 image
restart3 text link - GIF3 image
restart4 text link - GIF4 image

http://jsfiddle.net/GS427/97/

谢谢！

【问题讨论】：

标签： text hyperlink restart animated-gif

【解决方案1】：

您的脚本重新启动 GIF 动画所做的事情是更改重新加载 gif 的 src 属性。

您可以通过多种不同的方式执行此操作，以下是一个示例： http://jsfiddle.net/GS427/100/

 <a onclick='$("#img").attr("src","https://dl.dropboxusercontent.com/u/908148/once.gif");' href="#">this</a>

您可以将其提取到以图像 url 作为参数的 JavaScript 函数中。例如

function changeImage(imageUrl){
    $('#img').attr('src',imageUrl);
}

然后以这个为例：

<button onclick="changeImage('http://image1-url')">Image 1</button>
<button onclick="changeImage('http://image2-url')">Image 2</button>
<button onclick="changeImage('http://image3-url')">Image 3</button>
<button onclick="changeImage('http://image4-url')">Image 4</button>

【讨论】：

不加评论就投反对票 - 这样做有什么意义？
我刚才的回答也是 DV 的，现在看来 DV 的人已经把它删掉了。
嗯，你的回答和我的基本一样，所以这里不需要这个......或者等等 - 不想把 dv 业力还给选民：-P
谢谢。您的答案简单易行。谢谢。

【解决方案2】：

您需要为您的链接 (a) 分配一个 id，让我们在此示例中使用 id aniclk。

替换

<a href="#">this</a>

用这个：

<a id="aniclk" href="#">this</a>

注意id="aniclk"。

您需要将 Javascript 更改为：

$(function(){
    var image = new Image();
    image.src ='https://dl.dropboxusercontent.com/u/908148/once.gif';
    $('#aniclk').click(function(){
       $('#img').attr('src',image.src);
    });
});

工作示例：

$(function() {
  var image = new Image();
  image.src = 'https://dl.dropboxusercontent.com/u/908148/once.gif';
  $('#aniclk').click(function() {
    $('#img').attr('src', image.src);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>This is an animated GIF that plays once.</p>
<p>If you click on it, replay animation</p>
<img id="img" height="100px" width="100px" src="https://dl.dropboxusercontent.com/u/908148/once.gif" border="1">

<p>I want to restart the animation when click on <a id="aniclk" href="#">this</a> not the image</p>

请注意，您需要JQuery。

【讨论】：

谢谢。这很有帮助，因为我的页面上已经有了 jquery。谢谢！
@LucaIulian 没问题，这就是我们来这里的目的:-)。如果您能通过点击投票按钮旁边的绿色勾号来接受答案，我将不胜感激。