我一直在尝试执行以下操作：
- 在动画gif上添加一个CTA播放/停止按钮（由用户独立激活），该gif在编程中已经在5秒内停止;
- 单击按钮时避免将其带到图像的URL，这意味着按钮上的操作与单击图像区域的操作不同。
我最初使用Gifffer，这是一个自动停止动画gifs的绝佳库，但它并不真正适合我想做的事情（它可以停止加载图像），尽管绘制了一个非常不错的事实Button和我正在努力将其修改，以便能够实现我想要的东西。
我的html看起来像这样：
<!DOCTYPE html>
<html>
<head>
<title>
</title>
</head>
<body>
<a href="http://localhost/wordpress/2016/12/02/animated-gif/" rel="bookmark" title="Animated Gif"><img alt="source" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" height="249" src="http://localhost/wordpress/wp-content/uploads/2016/12/source.gif" width="500"></a>
</body>
</html>
我已经重新使用了不错的gifffer功能来创建播放/停止按钮，如下所示：
var doc = document;
var playButton = doc.createElement('div');
playButton.setAttribute('class','Button');
//nice settings from Gifffer
var playSize = 60;
playButton.setAttribute('style', 'width:' + playSize + 'px;height:' + playSize + 'px;border-radius:' + (playSize/2) + 'px;background:rgba(0, 0, 0, 0.5);position:absolute;top:50%;left:50%;margin:-' + (playSize/2) + 'px');
然后，我尝试通过在函数中包含以下代码来创建JSFIDDLE：
function createPlayButton(context, func){
var doc = document;
var playButton = doc.createElement('div');
playButton.setAttribute('class','Button');
//nice settings from Gifffer
var playSize = 60;
playButton.setAttribute('style', 'width:' + playSize + 'px;height:' + playSize + 'px;border-radius:' + (playSize/2) +
'px;background:rgba(0, 0, 0, 0.5); position:absolute;
top:50%;left:50%;margin:-' + (playSize/2) + 'px');
playButton.onclick = func;
context.appendChild(playButton);
}
，我相信，它可以从窗口内部调用，如下：
window.onload = function(){
createPlayButton(document.body, function(){
highlight(this.parentNode.childNodes[1]);
createPlayButton(this.parentNode, this.onclick);
});
}
我什至无法创建按钮，更不用说在单击时阻止将图像URL带到图像URL上。你能帮我吗？这是JSFIDDLE，请注意，我已经用静态图像替换了动画GIF，就像我的方案中一样，图像已经被"冷冻"：
https://jsfiddle.net/55dbv890/
谢谢，
播放/暂停GIF的一种简单方法是获取GIF的框架，并将静态图像用作按钮的 off off 动画gif作为按钮的状态。
以下片段演示了使用切换类来满足OP的目标。详细信息在来源中评论：
摘要
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1, user-scalable=no">
<title>gifClick</title>
</head>
<body>
<script>
/*~~ gifClick(image, gif, location, width, height)
| Creates a button with given gif as
| background, when clicked, the gif will
| "seem to pause" when in fact it is just
| swapped out with a static image.
| All parameters are required,
| there are no defaults.
*/
// image[string] = url of static image
// gif[string] = url of gif
// location[string] = CSS selector of element you
// want to place button in.
// ex. "body" or ".frame" or "#main"
// width[number] = number of px for width of button
// height[number] = number of px for height of button
function gifClick(image, gif, location, width, height) {
// Create button
var btn = document.createElement('button');
// Set image and gif urls as string values
var imgStr = 'url(' + image + ')';
var gifStr = 'url(' + gif + ')';
// Reference location of where the button will go
var L = document.querySelector(location);
// Set the dimensions and style of button
btn.style.width = width + 'px';
btn.style.height = height + 'px';
btn.style.backgroundRepeat = 'no-repeat';
btn.style.backgroundSize = 'contain';
btn.style.backgroundColor = 'transparent';
btn.style.cursor = 'pointer';
// Call function setStyle() to create
// the .on and .off classes.
// setStyle() is a separate function.
setStyle('.on {background-image:' + gifStr + ';}.off{background-image:' + imgStr + ';}');
// Set initial state .on and append button
setTimeout(function() {
btn.classList.add('on'), L.appendChild(btn);
}, 0);
// When the button is clicked...
btn.onclick = function() {
//...if the button has class .on...
if (btn.classList.contains('on')) {
//...wait 1 second and...
setTimeout(function() {
//...change the state to .off...
btn.classList.add('off');
btn.classList.remove('on');
}, 1000);
}
//...otherwise...
else {
//...change the state to .on
setTimeout(function() {
btn.classList.remove('off');
btn.classList.add('on');
}, 1000);
}
}
}
/*~~ setStyle(str)
| Takes a given string, wraps it in <style> tags,
| then inserts this style block as the first
| child of the body.
*/
function setStyle(str) {
var string = '<style>' + str + '</style>';
document.body.insertAdjacentHTML('afterBegin', string);
}
/* Usage */
var png = 'http://imgh.us/gir_zim.png'
var gif = 'http://imgh.us/gir_zim.gif'
var loc = 'body';
gifClick(png, gif, loc, 128, 128);
</script>
</body>
</html>