我想要一个 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 中。IE 在进一步单击时不会执行任何操作)。
最佳答案
这是完成的 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
来检查扩展。
关于javascript - 使用 JavaScript 点击播放/停止 gif,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40178556/