使用javascript播放/停止GIF点击

play/stop gif on click using javascript

本文关键字：GIF 点击 停止 javascript 播放 使用      更新时间：2023-09-26

我想要一个gif播放时点击，并停止时再次点击。我遵循这个方法:http://www.hongkiat.com/blog/on-click-animated-gif/

到目前为止，我有:

HTML 

<figure>
 <img src="test.png" alt="Static Image" data-alt="test.gif"/>
</figure> 
<script src="playGif.js" type="text/javascript"></script>

playGif.js 

(function($) {  
    // retrieve gif
    var getGif = function() {
        var gif = [];
        $('img').each(function() {
            var data = $(this).data('alt');
            gif.push(data);
        });
        return gif;
    }
    var gif = getGif();
    // pre-load gif
    var image = [];
    $.each(gif, function(index) {
        image[index]     = new Image();
        image[index].src = gif[index];
    });
    // swap on click
    $('figure').on('click', function() {
        var $this   = $(this),
            $index  = $this.index(),
            $img    = $this.children('img'),
            $imgSrc = $img.attr('src'),
            $imgAlt = $img.attr('data-alt'),
            $imgExt = $imgAlt.split('.');
        if($imgExt[1] === 'gif') {
            $img.attr('src', $img.data('alt')).attr('data-alt', $imgSrc);
        } else {
            $img.attr('src', $imgAlt).attr('data-alt', $img.data('alt'));
        }
    });
})(jQuery);

没有交换src和data-alt的内容，这只是将data-alt放入src，而data-alt保持不变。

gif确实在点击时播放，但如果再次点击，它会重新加载gif而不是恢复到png(至少在Chrome和Firefox中是这样的)。

这就是完成的jsfiddle: https://jsfiddle.net/2060cm1c/

这是一个简单的变量交换问题:

a=1;b=2;
a=b;// now a=2
b=a;// a=2, b=a=2
要解决这个问题，您需要一个临时变量: 
a=1;b=2;
temp=a;a=b;
b=temp;

现在解决OP的问题:

var temp=$img.attr('src');
$img.attr('src', $imgAlt).attr('data-alt', temp);

所以，这个问题就像交换两个变量一样简单。您不需要if来检查扩展

相关文章：