Javascript 在动画gif上添加“播放/暂停”按钮，而无需转到图像的URL_Javascript_Html_Css

Javascript 在动画gif上添加“播放/暂停”按钮，而无需转到图像的URL

javascript html css

Javascript 在动画gif上添加“播放/暂停”按钮，而无需转到图像的URL,javascript,html,css,Javascript,Html,Css,我一直在努力做到以下几点：在动画gif上添加一个CTA播放/停止按钮（由用户独立激活），该按钮已在5秒内以编程方式停止避免在点击按钮时被带到图像的URL，这意味着点击按钮的操作与点击图像区域的操作不同我最初使用了一个很棒的库，用于自动停止动画GIF，但它并不真正符合我想要做的（它在加载时停止图像），尽管事实上绘制了一个非常漂亮的按钮，我正在努力修改它以实现我想要的我的html如下所示： <!DOCTYPE html> <html> <head>

我一直在努力做到以下几点：

在动画gif上添加一个CTA播放/停止按钮（由用户独立激活），该按钮已在5秒内以编程方式停止
避免在点击按钮时被带到图像的URL，这意味着点击按钮的操作与点击图像区域的操作不同

我最初使用了一个很棒的库，用于自动停止动画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>

然后，我尝试通过在函数中包含以下代码来创建JSFIDLE：

    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中调用，如下所示：

    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');

window.onload = function(){
    createPlayButton(document.body, function(){
        highlight(this.parentNode.childNodes[1]);
        createPlayButton(this.parentNode, this.onclick);
    });
}

我甚至无法创建按钮，更不用说在单击时阻止被带到图像URL。你能帮忙吗？这是JSFIDLE，请注意，我已经用静态图像替换了动画gif，因为在我的场景中，图像已经“冻结”：

谢谢，

播放/暂停gif的一种简单方法是获取gif帧，并使用静态图像作为按钮的关闭状态，使用动画gif作为按钮的打开状态

下面的代码片段演示了如何使用切换类来满足OP的目标。有关详细信息，请参见来源：

一小条


吉喀克
/*~~点击（图像、gif、位置、宽度、高度）
|创建具有给定gif格式的按钮
|背景，单击时，gif将显示
|“似乎停顿”其实只是
|与静态图像交换。
|所有参数都是必需的，
|没有默认设置。
*/
//image[string]=静态图像的url
//gif[string]=gif的url
//location[string]=您选择的元素的CSS选择器
//想把按钮放进去。
//例如“主体”或“.frame”或“主体”
//宽度[数量]=按钮宽度的px数量
//高度[数量]=按钮高度的px数量
功能单击（图像、gif、位置、宽度、高度）{
//创建按钮
var btn=document.createElement（'button'）；
//将图像和gif URL设置为字符串值
var imgStr='url（'+image+'）；
var gifStr='url（'+gif+'）；
//按钮的参考位置
var L=document.querySelector（位置）；
//设置按钮的尺寸和样式
btn.style.width=宽度+px；
btn.style.height=高度+px；
btn.style.backgroundRepeat='no repeat'；
btn.style.backgroundSize='contain'；
btn.style.backgroundColor='透明'；
btn.style.cursor='pointer'；
//调用函数setStyle（）来创建
//上课和下课。
//setStyle（）是一个单独的函数。
setStyle（'.on{background image:'+gifStr+'；}.off{background image:'+imgStr+'；}'）；
//设置初始状态。打开并附加按钮
setTimeout（函数（）{
btn.classList.add（'on'），L.appendChild（btn）；
}, 0);
//单击按钮时。。。
btn.onclick=函数（）{
//…如果按钮有类。在。。。
if（btn.classList.contains（'on'））{
//…等一秒钟，然后。。。
setTimeout（函数（）{
//…将状态更改为。关闭。。。
btn.classList.add（'off'）；
btn.classList.remove（'on'）；
}, 1000);
}
//……否则。。。
否则{
//…将状态更改为.on
setTimeout（函数（）{
btn.classList.remove（'off'）；
btn.classList.add（'on'）；
}, 1000);
}
}
}
/*~~setStyle（str）
|获取给定字符串，将其包装在标记中，
|然后插入此样式块作为第一个样式块
|身体的孩子。
*/
函数集合样式（str）{
变量字符串=“”+str+“”；
document.body.insertAdjacentHTML（'afterBegin'，string）；
}
/*用法*/
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）；

播放/暂停gif的一种简单方法是获取gif帧，并使用静态图像作为按钮的关闭状态，使用动画gif作为按钮的打开状态

下面的代码片段演示了如何使用切换类来满足OP的目标。有关详细信息，请参见来源：

一小条


吉喀克
/*~~点击（图像、gif、位置、宽度、高度）
|创建具有给定gif格式的按钮
|背景，单击时，gif将显示
|“似乎停顿”其实只是
|与静态图像交换。
|所有参数都是必需的，
|没有默认设置。
*/
//image[string]=静态图像的url
//gif[string]=gif的url
//location[string]=您选择的元素的CSS选择器
//想把按钮放进去。
//例如“主体”或“.frame”或“主体”
//宽度[数量]=按钮宽度的px数量
//高度[数量]=按钮高度的px数量
功能单击（图像、gif、位置、宽度、高度）{
//创建按钮
var btn=document.createElement（'button'）；
//将图像和gif URL设置为字符串值
var imgStr='url（'+image+'）；
var gifStr='url（'+gif+'）；
//按钮的参考位置
var L=文档查询选择器（位置