咨询在Wix站点实现鼠标悬停图片折射扭曲跟随鼠标效果的方案

核心实现逻辑完全不需要Babel支持，直接使用Wix平台原生兼容的HTML/CSS/JS即可开发，不需要申请额外权限或安装插件。

两种可行实现路径 #

• 精细效果实现方案（和参考案例效果一致）
  用原生Canvas实现网格顶点变形：将目标图片拆分为数十个等距网格顶点，监听鼠标移动事件时，根据每个顶点与鼠标的实时距离计算位移偏移量，距离鼠标越近的顶点偏移幅度越大，模拟折射弯曲的视觉效果。所有逻辑用ES5语法编写即可，不需要任何预编译工具，直接嵌入Wix自定义代码块就能运行。
• 简化版快速实现方案
  用CSS变换+SVG位移滤镜实现，开发成本更低：通过mousemove事件监听鼠标位置，动态调整图片的skew、scale属性，同时叠加内嵌的SVG feDisplacementMap 滤镜模拟扭曲效果，不需要外部资源，适配性更高。

Wix平台部署方法 #

打开Wix站点编辑器，选择需要添加效果的页面，点击「添加元素」→「嵌入」→「自定义代码嵌入」，将完整的HTML/CSS/JS代码粘贴到代码框中，调整嵌入块的尺寸到和目标图片一致即可上线，不需要额外配置。

简化版实现示例代码 #

<!-- 内嵌SVG扭曲滤镜，无需外部资源 -->
<svg style="position: absolute; width: 0; height: 0; visibility: hidden;">
  <filter id="refractionFilter">
    <feTurbulence type="fractalNoise" baseFrequency="0.01" numOctaves="2" result="noise" />
    <feDisplacementMap in="SourceGraphic" in2="noise" scale="15" xChannelSelector="R" yChannelSelector="G" />
  </filter>
</svg>

<div id="refractContainer" style="width: 300px; height: 300px; position: relative; overflow: hidden;">
  <img id="targetImage" src="替换为你的图片直链地址" style="width: 100%; height: 100%; object-fit: cover; filter: url(#refractionFilter); transition: all 0.15s ease-out;" />
</div>

<script type="text/javascript">
// 原生ES5语法，无需Babel转译
var container = document.getElementById('refractContainer');
var img = document.getElementById('targetImage');

container.addEventListener('mousemove', function(e) {
  var rect = container.getBoundingClientRect();
  var mouseX = e.clientX - rect.left;
  var mouseY = e.clientY - rect.top;
  var centerX = rect.width / 2;
  var centerY = rect.height / 2;
  
  // 调整参数可修改扭曲幅度
  var skewX = ((mouseX - centerX) / centerX) * 4;
  var skewY = ((mouseY - centerY) / centerY) * 4;
  var scale = 1.03;
  
  img.style.transform = 'skew(' + skewX + 'deg, ' + skewY + 'deg) scale(' + scale + ')';
});

container.addEventListener('mouseleave', function() {
  img.style.transform = 'skew(0deg, 0deg) scale(1)';
});
</script>

如果需要更高精度的扭曲效果，将上述逻辑替换为Canvas网格变形的原生JS实现即可，不需要调整Wix侧的配置。

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