单击文本时重新启动 GIF 动画 link

Question

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

假设我有 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/

谢谢！

Answer 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>

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

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>

Answer 2

您需要为您的 link (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。

单击文本时重新启动 GIF 动画 link

Restart a GIF animation when you click on a text link

text

hyperlink

restart

animated-gif