我一直在努力做到以下几点:
- 在动画 gif 上添加一个 CTA 播放/停止按钮(由用户独立激活)，该按钮已通过编程在 5 秒内停止；
- 避免在单击按钮时转到图像的 URL，这意味着按钮上的操作与单击图像区域上的操作不同。
我最初使用了 Gifffer ，一个很棒的自动停止动画 gif 的库，但它并不真正适合我想做的事情(它在加载时停止图像)，尽管它绘制了一个非常漂亮的按钮并且我正在努力将其修改为能够实现我想要的。
我的 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 中调用，如下所示:
window.onload = function(){
createPlayButton(document.body, function(){
highlight(this.parentNode.childNodes[1]);
createPlayButton(this.parentNode, this.onclick);
});
}
我什至无法创建按钮，更不用说防止在单击时被带到图像 URL 了。你能帮我吗？这是 jsfiddle，请注意我已经用静态图像替换了动画 gif，因为在我的场景中图像已经“卡住”:
https://jsfiddle.net/55dbv890/
谢谢，
最佳答案
播放/暂停 gif 的一种简单方法是获取 gif 的帧并将静态图像用作按钮的 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>关于javascript - 在动画 gif 上添加播放/暂停按钮而不被带到图像的 URL，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40947921/