Question

我想要在网页中显示一些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/

谢谢！

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

您需要为链接指定id a），在此示例中使用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);
    });
});

工作示例：

＆＃13;

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

＆＃13;

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

＆＃13;

请注意，您需要JQuery。

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

2 个答案: