创建脚本调用切换按钮：实现页面Glitch效果的启停控制

我来帮你搞定这个切换按钮的需求！咱们可以利用mgGlitch插件本身的destroy参数，结合按钮的点击事件轻松实现禁用和重新启用效果的功能。下面是具体的实现步骤：

1. 添加切换按钮到页面 #

先在你的HTML页面里合适的位置（比如页面边角或者效果区域附近）插入一个按钮：

<button id="glitchToggle">关闭Glitch效果</button>

2. 初始化Glitch效果并保存实例 #

修改你原来的初始化代码，把插件实例存储起来，方便后续进行开启/关闭操作：

// 声明变量存储Glitch实例
let glitchInstance;

$(function() {
  // 初始化效果并赋值给实例变量
  glitchInstance = $(".glitch-img").mgGlitch({
    destroy: false,
    glitch: true,
    scale: true,
    blend: true,
    // 这里保留你原来设置的其他参数
  });
});

3. 编写按钮的切换逻辑 #

给按钮绑定点击事件，根据当前效果的状态来切换开启/关闭，同时更新按钮文字提示：

$(function() {
  $("#glitchToggle").on("click", function() {
    const $toggleBtn = $(this);
    // 通过插件存储的状态判断当前是否激活
    const isGlitchActive = glitchInstance.data("mgGlitch").isActive;

    if (isGlitchActive) {
      // 关闭Glitch效果
      glitchInstance.mgGlitch({ destroy: true });
      $toggleBtn.text("开启Glitch效果");
    } else {
      // 重新初始化并开启效果（参数要和初始设置一致）
      glitchInstance.mgGlitch({
        destroy: false,
        glitch: true,
        scale: true,
        blend: true,
        // 这里同样保留你原来的其他参数
      });
      $toggleBtn.text("关闭Glitch效果");
    }
  });
});

4. 可选：优化按钮样式 #

为了让按钮更显眼、操作方便，你可以给它加一点CSS样式：

#glitchToggle {
  padding: 10px 20px;
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 9999; /* 确保按钮在最上层 */
  border: none;
  background-color: #333;
  color: #fff;
  cursor: pointer;
  border-radius: 4px;
  font-size: 14px;
}

#glitchToggle:hover {
  background-color: #555;
}

注意事项 #

• 确保你使用的mgGlitch插件版本支持destroy参数来终止效果，并且允许重新初始化。如果是较旧的版本，可能需要升级插件或者检查官方文档确认功能兼容性。
• 重新初始化时的参数要和第一次初始化的参数完全一致，这样才能恢复到原来的效果状态。

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