控制Microsoft Word生成HTML中的GIF动画

实现思路 #

通过JavaScript为每个GIF生成静态预览帧和控制按钮：默认显示GIF的第一帧静态图，点击按钮切换播放/暂停状态——播放时加载原GIF动画，暂停时换回静态帧。

代码及操作步骤 #

代码片段 #

复制以下代码，粘贴到Word导出的HTML文件头部：

window.onload = function() {
    // 遍历页面中所有GIF图片
    document.querySelectorAll('img[src$=".gif"]').forEach(gif => {
        // 创建静态帧元素，用于显示暂停状态
        const staticImg = document.createElement('img');
        staticImg.src = gif.src;
        staticImg.style.display = 'none';
        
        // 静态帧加载完成后，默认隐藏原GIF，显示静态帧
        staticImg.onload = () => {
            gif.style.display = 'none';
            staticImg.style.display = 'inline';
        };
        gif.parentNode.insertBefore(staticImg, gif);

        // 创建控制按钮
        const toggleBtn = document.createElement('button');
        toggleBtn.textContent = '播放';
        toggleBtn.style.marginLeft = '8px';
        
        // 按钮点击事件：切换播放/暂停
        toggleBtn.onclick = () => {
            if (gif.style.display === 'none') {
                gif.style.display = 'inline';
                staticImg.style.display = 'none';
                toggleBtn.textContent = '暂停';
            } else {
                gif.style.display = 'none';
                staticImg.style.display = 'inline';
                toggleBtn.textContent = '播放';
            }
        };
        gif.parentNode.insertBefore(toggleBtn, gif.nextSibling);
    });
};

粘贴位置 #

1. 用文本编辑器（如记事本、VS Code）打开Word导出的HTML文件
2. 找到<head>标签，将上述代码包裹在<script>标签内，粘贴到<head>的最开头，示例：

<head>
<script>
<!-- 上面的JS代码 -->
</script>
<!-- 原HTML的其他头部内容 -->
</head>

3. 保存文件后，用浏览器打开即可生效

使用说明 #

• 页面加载完成后，所有GIF默认显示第一帧静态图，旁边会出现「播放」按钮
• 点击「播放」启动GIF动画，点击「暂停」回到静态状态
• 无需修改原Word文档，仅需调整导出后的HTML文件即可

内容的提问来源于stack exchange，提问作者Ron Alby