tsParticles onDiv 事件把粒子交互绑定到页面指定 DOM 元素【免费下载链接】tsparticlestsParticles - Easily create highly customizable JavaScript particles effects, confetti explosions and fireworks animations and use them as animated backgrounds for your website. Ready to use components available for React.js, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Inferno, Solid, Riot and Web Components.项目地址: https://gitcode.com/GitHub_Trending/ts/tsparticlesonDiv是 tsParticles 交互式事件interactivity.events中用于将粒子行为绑定到页面上指定 DOM 元素的配置项当某个 div或任何符合 CSS 选择器的元素出现在画布上时粒子会围绕该元素的位置产生 repulse、bubble、bounce 等效果从而为 CTA 按钮、卡片、横幅等热点区域制造局部粒子反应。读完本文你将掌握onDiv全部配置项的含义与默认值、它从选项加载到几何判定圆形/矩形作用域的完整源码链路以及多选择器、多模式组合的实战写法。配置属性详解onDiv配置块位于interactivity.events.onDiv官方文档见 Div.md。其完整属性定义如下表继承自文档的属性表并结合源码补全默认值KeyTypeExampleNotesenablebooleantrue/falseEnables div-targeted interactions默认falsemodestring/arraybounce、bubble、repulseInteractions applied when hovering matching elementsselectorsstring/array#cta/[.card, .hero]CSS selectors to bindtypestringcircle/rectangleInteraction area shape默认circle源码依据是 DivEvent.ts 中的默认值声明export class DivEvent implements IDivEvent, IOptionLoaderIDivEvent { /** The div event handler enabling mode */ enable false; /** Div mode values used by the event */ mode: SingleOrMultiplestring []; selectors: SingleOrMultiplestring []; type: DivType | keyof typeof DivType DivType.circle; // load() 依次解析 selectors / enable / mode / type 四个字段 }对应的类型接口在 IDivEvent.ts其中mode与selectors均为SingleOrMultiplestring意味着既可以写成单个字符串也可以写成字符串数组type的取值来自 DivType 枚举/** Div element shape types for interactivity */ export enum DivType { circle circle, rectangle rectangle, }DivEvent.load()使用引擎的loadProperty逐项合并配置因此在 JSON 配置中缺省任何字段都会回落到上述默认值——特别注意enable默认为false若不显式开启则整个 div 交互不生效。支持多组 onDiv 配置从源码结构看onDiv还支持数组形式。Events.ts 中声明为onDiv: SingleOrMultipleDivEvent new DivEvent(); // load 时 this.onDiv executeOnSingleOrMultiple(onDiv, t { const tmp new DivEvent(); tmp.load(t); return tmp; });即events.onDiv既可以是一个对象也可以是一个对象数组用于为不同的选择器集合配置不同的 mode 与 type例如.cta用repulsecircle.banner用bubblerectangle。快速上手示例文档给出的最小可用示例如下配合repulse模式让鼠标区域内的粒子被.interactive-zone元素推挤开{ interactivity: { events: { onDiv: { enable: true, selectors: [.interactive-zone], mode: repulse, type: circle } } } }注意mode指定的是交互效果的类型repulse/bubble/bounce 等而效果的具体参数半径、强度等需要在interactivity.modes.mode下配置详见 Modes。多选择器、多模式组合的写法{ interactivity: { events: { onDiv: { enable: true, selectors: [#cta, .card, .hero], mode: [repulse, bubble], type: rectangle } }, modes: { repulse: { enable: true, distance: 100, strength: 5 }, bubble: { distance: 100, size: 12 } } } }源码链路从选择器到几何作用域onDiv的运行时行为分布在两处事件选项的解析plugins/interactivity与各外部交互插件interactions/external/*中对 div 的实际处理。事件分发工具函数utils.ts 提供了两个核心函数isDivModeEnabled(mode, divs)遍历所有DivEvent只要存在某个启用的事件且其mode数组包含当前模式即返回truedivModeExecute(mode, divs, callback)对命中条件的事件再展开其selectors逐个调用callback(selector, div)把具体的选择器交给对应插件处理。插件侧的几何判定以 repulse 插件为例Repulser.ts 在#singleSelectorRepulse中展示了完整的 div 处理流程约 L375-L411const query safeDocument().querySelectorAll(selector); if (!query.length) { return; } query.forEach(item { const elem item as HTMLElement, pxRatio container.retina.pixelRatio, pos { x: (elem.offsetLeft elem.offsetWidth * half) * pxRatio, y: (elem.offsetTop elem.offsetHeight * half) * pxRatio, }, repulseRadius elem.offsetWidth * half * pxRatio, area div.type DivType.circle ? new Circle(pos.x, pos.y, repulseRadius) : new Rectangle( elem.offsetLeft * pxRatio, elem.offsetTop * pxRatio, elem.offsetWidth * pxRatio, elem.offsetHeight * pxRatio, ), // ... 随后调用 #processRepulse 对 area 内的粒子施加推挤 });这段代码揭示了type参数的实际含义与几个工程细节圆形作用域circle默认以元素几何中心(offsetLeft width/2, offsetTop height/2)为圆心、width/2为半径构造Circle粒子在该圆内被推挤矩形作用域rectangle直接以元素的 offset 左上角与宽高构造Rectangle粒子落在元素矩形框内即被影响——更适合按钮、卡片等规则区域坐标经过pixelRatio换算元素偏移量与尺寸都会乘以container.retina.pixelRatio保证在高 DPRRetina屏上作用域与画布坐标系一致选择器查询为空则直接跳过querySelectorAll没匹配到元素时不产生任何效果这是排查onDiv 不生效时首先要确认的一点。bubble、bounce、destroy 等插件同样通过divModeExecute/isDivModeEnabled复用同一套分发逻辑见 Bubbler.ts、bounce/src/Utils.ts。生命周期挂载整个交互系统的启停由 InteractivityPluginInstance.ts 管理start()中调用addListeners()与startObserving()后者可推断用于监听 DOM 变化从而在元素新增/移除后同步 div 作用域stop()中对称地移除监听。div 交互不需要额外的初始化步骤只要onDiv.enable为true且对应 mode 已加载即可。常见陷阱enable未设为true默认值为false见 DivEvent.ts最常见的配置了没反应原因选择器没有匹配到真实 DOM 节点querySelectorAll返回空数组时整个 div 事件静默失效元素需在实际运行的页面中已挂载到画布所在的 document 上下文mode 数组中某个模式未在interactivity.modes下配置多个 mode 组成数组时需在modes中分别给出各模式的参数否则该模式使用默认值未加载对应交互插件如connect、bubble等效果依赖各自插件tsparticles/interactions-external-bubble等仅启用onDiv不会凭空产生效果offset 坐标系前提从源码结构看div 位置取自elem.offsetLeft/offsetTop相对于 offsetParent若目标元素被包裹在带位移的定位容器中其计算出的画布坐标会随 offsetParent 变化选择元素时尽量让 offsetParent 与画布容器对齐可避免错位。关联文档事件总览Events模式参数Modes选项根文档Options核心实现plugins/interactivity、interactions/external/repulse【免费下载链接】tsparticlestsParticles - Easily create highly customizable JavaScript particles effects, confetti explosions and fireworks animations and use them as animated backgrounds for your website. Ready to use components available for React.js, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Inferno, Solid, Riot and Web Components.项目地址: https://gitcode.com/GitHub_Trending/ts/tsparticles创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 tsParticles onDiv 事件：把粒子交互绑定到页面指定 DOM 元素
tsParticles onDiv 事件把粒子交互绑定到页面指定 DOM 元素【免费下载链接】tsparticlestsParticles - Easily create highly customizable JavaScript particles effects, confetti explosions and fireworks animations and use them as animated backgrounds for your website. Ready to use components available for React.js, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Inferno, Solid, Riot and Web Components.项目地址: https://gitcode.com/GitHub_Trending/ts/tsparticlesonDiv是 tsParticles 交互式事件interactivity.events中用于将粒子行为绑定到页面上指定 DOM 元素的配置项当某个 div或任何符合 CSS 选择器的元素出现在画布上时粒子会围绕该元素的位置产生 repulse、bubble、bounce 等效果从而为 CTA 按钮、卡片、横幅等热点区域制造局部粒子反应。读完本文你将掌握onDiv全部配置项的含义与默认值、它从选项加载到几何判定圆形/矩形作用域的完整源码链路以及多选择器、多模式组合的实战写法。配置属性详解onDiv配置块位于interactivity.events.onDiv官方文档见 Div.md。其完整属性定义如下表继承自文档的属性表并结合源码补全默认值KeyTypeExampleNotesenablebooleantrue/falseEnables div-targeted interactions默认falsemodestring/arraybounce、bubble、repulseInteractions applied when hovering matching elementsselectorsstring/array#cta/[.card, .hero]CSS selectors to bindtypestringcircle/rectangleInteraction area shape默认circle源码依据是 DivEvent.ts 中的默认值声明export class DivEvent implements IDivEvent, IOptionLoaderIDivEvent { /** The div event handler enabling mode */ enable false; /** Div mode values used by the event */ mode: SingleOrMultiplestring []; selectors: SingleOrMultiplestring []; type: DivType | keyof typeof DivType DivType.circle; // load() 依次解析 selectors / enable / mode / type 四个字段 }对应的类型接口在 IDivEvent.ts其中mode与selectors均为SingleOrMultiplestring意味着既可以写成单个字符串也可以写成字符串数组type的取值来自 DivType 枚举/** Div element shape types for interactivity */ export enum DivType { circle circle, rectangle rectangle, }DivEvent.load()使用引擎的loadProperty逐项合并配置因此在 JSON 配置中缺省任何字段都会回落到上述默认值——特别注意enable默认为false若不显式开启则整个 div 交互不生效。支持多组 onDiv 配置从源码结构看onDiv还支持数组形式。Events.ts 中声明为onDiv: SingleOrMultipleDivEvent new DivEvent(); // load 时 this.onDiv executeOnSingleOrMultiple(onDiv, t { const tmp new DivEvent(); tmp.load(t); return tmp; });即events.onDiv既可以是一个对象也可以是一个对象数组用于为不同的选择器集合配置不同的 mode 与 type例如.cta用repulsecircle.banner用bubblerectangle。快速上手示例文档给出的最小可用示例如下配合repulse模式让鼠标区域内的粒子被.interactive-zone元素推挤开{ interactivity: { events: { onDiv: { enable: true, selectors: [.interactive-zone], mode: repulse, type: circle } } } }注意mode指定的是交互效果的类型repulse/bubble/bounce 等而效果的具体参数半径、强度等需要在interactivity.modes.mode下配置详见 Modes。多选择器、多模式组合的写法{ interactivity: { events: { onDiv: { enable: true, selectors: [#cta, .card, .hero], mode: [repulse, bubble], type: rectangle } }, modes: { repulse: { enable: true, distance: 100, strength: 5 }, bubble: { distance: 100, size: 12 } } } }源码链路从选择器到几何作用域onDiv的运行时行为分布在两处事件选项的解析plugins/interactivity与各外部交互插件interactions/external/*中对 div 的实际处理。事件分发工具函数utils.ts 提供了两个核心函数isDivModeEnabled(mode, divs)遍历所有DivEvent只要存在某个启用的事件且其mode数组包含当前模式即返回truedivModeExecute(mode, divs, callback)对命中条件的事件再展开其selectors逐个调用callback(selector, div)把具体的选择器交给对应插件处理。插件侧的几何判定以 repulse 插件为例Repulser.ts 在#singleSelectorRepulse中展示了完整的 div 处理流程约 L375-L411const query safeDocument().querySelectorAll(selector); if (!query.length) { return; } query.forEach(item { const elem item as HTMLElement, pxRatio container.retina.pixelRatio, pos { x: (elem.offsetLeft elem.offsetWidth * half) * pxRatio, y: (elem.offsetTop elem.offsetHeight * half) * pxRatio, }, repulseRadius elem.offsetWidth * half * pxRatio, area div.type DivType.circle ? new Circle(pos.x, pos.y, repulseRadius) : new Rectangle( elem.offsetLeft * pxRatio, elem.offsetTop * pxRatio, elem.offsetWidth * pxRatio, elem.offsetHeight * pxRatio, ), // ... 随后调用 #processRepulse 对 area 内的粒子施加推挤 });这段代码揭示了type参数的实际含义与几个工程细节圆形作用域circle默认以元素几何中心(offsetLeft width/2, offsetTop height/2)为圆心、width/2为半径构造Circle粒子在该圆内被推挤矩形作用域rectangle直接以元素的 offset 左上角与宽高构造Rectangle粒子落在元素矩形框内即被影响——更适合按钮、卡片等规则区域坐标经过pixelRatio换算元素偏移量与尺寸都会乘以container.retina.pixelRatio保证在高 DPRRetina屏上作用域与画布坐标系一致选择器查询为空则直接跳过querySelectorAll没匹配到元素时不产生任何效果这是排查onDiv 不生效时首先要确认的一点。bubble、bounce、destroy 等插件同样通过divModeExecute/isDivModeEnabled复用同一套分发逻辑见 Bubbler.ts、bounce/src/Utils.ts。生命周期挂载整个交互系统的启停由 InteractivityPluginInstance.ts 管理start()中调用addListeners()与startObserving()后者可推断用于监听 DOM 变化从而在元素新增/移除后同步 div 作用域stop()中对称地移除监听。div 交互不需要额外的初始化步骤只要onDiv.enable为true且对应 mode 已加载即可。常见陷阱enable未设为true默认值为false见 DivEvent.ts最常见的配置了没反应原因选择器没有匹配到真实 DOM 节点querySelectorAll返回空数组时整个 div 事件静默失效元素需在实际运行的页面中已挂载到画布所在的 document 上下文mode 数组中某个模式未在interactivity.modes下配置多个 mode 组成数组时需在modes中分别给出各模式的参数否则该模式使用默认值未加载对应交互插件如connect、bubble等效果依赖各自插件tsparticles/interactions-external-bubble等仅启用onDiv不会凭空产生效果offset 坐标系前提从源码结构看div 位置取自elem.offsetLeft/offsetTop相对于 offsetParent若目标元素被包裹在带位移的定位容器中其计算出的画布坐标会随 offsetParent 变化选择元素时尽量让 offsetParent 与画布容器对齐可避免错位。关联文档事件总览Events模式参数Modes选项根文档Options核心实现plugins/interactivity、interactions/external/repulse【免费下载链接】tsparticlestsParticles - Easily create highly customizable JavaScript particles effects, confetti explosions and fireworks animations and use them as animated backgrounds for your website. Ready to use components available for React.js, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Inferno, Solid, Riot and Web Components.项目地址: https://gitcode.com/GitHub_Trending/ts/tsparticles创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考