当您单击文本链接时，重新启动GIF动画

Question

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

假设我有4张动图，我希望是这样的:

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动画是改变src属性重新加载GIF。

你可以用很多不同的方法来做这件事，下面是一个例子: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>

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