将jQuery鼠标悬停触发的Sparkle效果改为页面加载触发并添加禁用复选框

没问题，我帮你搞定这两个需求——让特效页面加载就自动跑，再加个复选框控制开关。下面分步骤给你修改方案：

1. 实现页面加载自动运行Sparkle特效 #

原代码的特效只绑定了鼠标交互事件，要改成自动启动，核心是在初始化完Sparkle实例后直接触发启动逻辑，不用等鼠标事件。另外我帮你把实例存在元素的data属性里，方便后面复选框控制。

修改后的$.fn.sparkleh插件代码：

$.fn.sparkleh = function( options ) {
  return this.each( function(k,v) {
    var $this = $(v).css("position","relative");
    var settings = $.extend({
      width: $this.outerWidth(),
      height: $this.outerHeight(),
      color: "#FFFFFF",
      count: 30,
      overlap: 0,
      speed: 1
    }, options );

    var sparkle = new Sparkle( $this, settings );
    
    // 页面加载完成直接启动特效
    sparkle.over();

    // 保留原有的鼠标/焦点事件（可选，如果你还需要交互时重新激活特效）
    $this.on({
      "mouseover focus" : function(e) {
        sparkle.over();
      },
      "mouseout blur" : function(e) {
        sparkle.out();
      }
    });

    // 把Sparkle实例绑定到元素上，方便后续复选框控制
    $this.data('sparkleInstance', sparkle);
  });
}

2. 添加复选框控制特效开关 #

首先在你的HTML里加一个复选框：

<label>
  <input type="checkbox" id="toggleSparkle" checked>
  启用Sparkle特效
</label>

然后添加监听代码，和初始化代码放在一起：

$(function() {
  // 初始化特效（保持你的原有配置）
  $("sparkley:last").sparkleh({ color: "rainbow", count: 50, overlap: 5 });

  // 监听复选框状态变化
  $('#toggleSparkle').on('change', function() {
    var sparkleInstance = $("sparkley:last").data('sparkleInstance');
    if (this.checked) {
      sparkleInstance.over(); // 启动特效
    } else {
      sparkleInstance.out(); // 停止特效（带淡出动画）
    }
  });
});

额外注意点 #

你提供的代码里datauri的base64字符串是截断的（最后是MjAxMC8xMi8wNy0xMDo1NzowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5），这会导致粒子图片加载失败，特效显示不出来。请确保你补全了完整的base64图片数据，这也是之前修改后功能失效的潜在原因之一。

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