【问题标题】: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 没问题,这就是我们来这里的目的:-)。如果您能通过点击投票按钮旁边的绿色勾号来接受答案,我将不胜感激。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2016-07-12
    • 1970-01-01
    • 2013-11-18
    • 1970-01-01
    • 1970-01-01
    • 2021-10-30
    • 1970-01-01
    相关资源
    最近更新 更多