如何在React项目不引入jQuery和额外script实现文本背景图随鼠标移动效果

结论 #

可以实现，无需额外引入其他<script>标签，你的项目中已引入的umi.js已经包含完整的React运行时，仅用React原生的事件处理和状态管理能力即可完成效果。

实现思路 #

核心逻辑是监听鼠标在标题元素上的移动事件，计算鼠标相对于元素的百分比坐标，动态更新background-position属性即可，完全不需要依赖jQuery。

具体实现步骤 #

1. 保留原有CSS，可选增加过渡效果 #

你现有的.bigTitle样式可以直接复用，如果希望背景移动效果更顺滑，可以补充一行过渡属性：

.bigTitle{
  font-weight: 800;
  color: transparent;
  font-size:120px;
  background: url("https://phandroid.s3.amazonaws.com/wp-content/uploads/2014/05/rainbow-nebula.jpg") repeat;
  background-position: 40% 50%;
  -webkit-background-clip: text;
  position:relative;
  text-align:center;
  line-height:90px;
  letter-spacing: -8px;
  /* 新增：背景位置变化过渡，提升流畅度 */
  transition: background-position 0.1s ease;
}

2. 编写React组件逻辑 #

在你用到该标题的React组件中，添加状态存储背景位置、绑定鼠标事件即可，参考代码如下：

import { useState } from 'react';

const RainbowTitle = () => {
  // 初始背景位置和CSS默认值保持一致
  const [bgPosition, setBgPosition] = useState('40% 50%');

  // 鼠标移动时更新背景位置
  const handleMouseMove = (e) => {
    const target = e.currentTarget;
    const rect = target.getBoundingClientRect();
    // 计算鼠标在元素内的相对百分比坐标
    const x = ((e.clientX - rect.left) / rect.width) * 100;
    const y = ((e.clientY - rect.top) / rect.height) * 100;
    setBgPosition(`${x.toFixed(2)}% ${y.toFixed(2)}%`);
  };

  // 鼠标移出后恢复默认位置，不需要可删除该方法
  const handleMouseLeave = () => {
    setBgPosition('40% 50%');
  };

  return (
    <div
      className="bigTitle"
      onMouseMove={handleMouseMove}
      onMouseLeave={handleMouseLeave}
      style={{ backgroundPosition: bgPosition }}
    >
      这里放你的标题文本
    </div>
  );
};

export default RainbowTitle;

注意事项 #

• 该实现完全基于React原生能力，没有引入任何第三方依赖，不需要修改index.html新增额外脚本
• 如果你需要调整背景跟随的灵敏度，可以修改CSS中transition的时长，或者在计算坐标时增加倍率参数调整偏移幅度

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