发表于 2024年10月2日1年前 通过 ScreenToGif 制作了一个 单次播放的 gif ，放到了语雀的文档上。 效果确实是 单次播放的，但是如果我想再次播放的话，就得 F5 刷新一次。 我想实现这种效果，“网页第一次加载时，播放一次（即 gif 是单次播放的）。之后，鼠标点击 gif 图片时，就再执行一次播放”。 想实现这种效果，是不是必须要 用油猴脚本写一个类似这个 https://blog.csdn.net/dragoo1/article/details/92426976 里面的脚本了？ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>点击播放 GIF 图片</title> <style> #gifContainer { width: 300px; height: 300px; cursor: pointer; } </style> </head> <body> <div id="gifContainer" onclick="playOnce()"> <img id="gifImage" src="your_gif_image.gif" alt="GIF Image"> </div> <script> function playOnce() { var gif = document.getElementById("gifImage"); var src = gif.src; // 设置 GIF 图片的 src 属性为空字符串，然后再设置回原来的 src // 这将导致 GIF 图片重新加载并播放一次 gif.src = ""; gif.src = src; // 移除点击事件，防止重复点击播放 document.getElementById("gifContainer").onclick = null; } </script> </body> </html>
通过 ScreenToGif 制作了一个 单次播放的 gif ，放到了语雀的文档上。 效果确实是 单次播放的，但是如果我想再次播放的话，就得 F5 刷新一次。
我想实现这种效果，“网页第一次加载时，播放一次（即 gif 是单次播放的）。之后，鼠标点击 gif 图片时，就再执行一次播放”。
想实现这种效果，是不是必须要 用油猴脚本写一个类似这个 https://blog.csdn.net/dragoo1/article/details/92426976 里面的脚本了？