如何在div内鼠标移动约100px时随机更换图片src？

嘿，这就帮你实现这个鼠标移动触发图片切换的功能！下面是完整的代码示例，完全符合你的要求——只更新图片src属性、不堆叠元素、需要点击按钮启动示例：

完整实现代码 #

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>鼠标移动换图示例</title>
  <style>
    #imageContainer {
      width: 600px;
      height: 450px;
      border: 2px solid #eee;
      margin: 20px 0;
      /* 给容器设置足够的鼠标移动空间 */
    }

    #randomImage {
      width: 100%;
      height: auto;
      /* 图片自适应容器，保持比例 */
    }

    #startDemo {
      padding: 8px 16px;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <button id="startDemo">点击查看示例</button>
  <div id="imageContainer">
    <img id="randomImage" src="https://picsum.photos/600/450?random=1" alt="随机展示图片">
  </div>

  <script>
    // 替换成你自己的图片地址数组
    const imageUrls = [
      "https://picsum.photos/600/450?random=1",
      "https://picsum.photos/600/450?random=2",
      "https://picsum.photos/600/450?random=3",
      "https://picsum.photos/600/450?random=4",
      "https://picsum.photos/600/450?random=5"
    ];

    const container = document.getElementById('imageContainer');
    const image = document.getElementById('randomImage');
    const startBtn = document.getElementById('startDemo');

    let lastMousePos = null;
    let isDemoActive = false;

    // 计算两点之间的距离
    function calculateDistance(x1, y1, x2, y2) {
      return Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2));
    }

    // 随机更换图片src
    function changeRandomImage() {
      const randomIndex = Math.floor(Math.random() * imageUrls.length);
      image.src = imageUrls[randomIndex];
    }

    // 鼠标移动事件处理
    function handleMouseMove(e) {
      if (!isDemoActive) return;

      const currentPos = { x: e.clientX, y: e.clientY };
      if (!lastMousePos) {
        lastMousePos = currentPos;
        return;
      }

      const distance = calculateDistance(lastMousePos.x, lastMousePos.y, currentPos.x, currentPos.y);
      // 当移动距离超过100px时切换图片
      if (distance >= 100) {
        changeRandomImage();
        // 重置鼠标起始位置，避免连续触发
        lastMousePos = currentPos;
      }
    }

    // 点击按钮启动示例
    startBtn.addEventListener('click', () => {
      isDemoActive = true;
      startBtn.textContent = '示例已启动，在框内移动鼠标试试！';
      startBtn.disabled = true;
      // 初始化鼠标位置
      lastMousePos = null;
      container.addEventListener('mousemove', handleMouseMove);
    });
  </script>
</body>
</html>

关键细节说明 #

• 仅更新图片src：整个逻辑只修改image.src属性，完全不会操作元素的display样式或添加/删除图片元素，符合你的要求。
• 鼠标移动距离判断：用勾股定理计算鼠标的移动距离，当距离≥100px时触发图片切换，每次切换后重置鼠标起始位置，确保每移动约100px才切换一次。
• 点击启动示例：页面加载完成后，必须点击按钮才会激活鼠标监听，避免页面一加载就自动触发。
• 自定义图片数组：你只需要把imageUrls数组里的地址替换成自己的图片链接即可。

内容的提问来源于stack exchange，提问作者Al-76