javascript实现跟随鼠标移动的图片

2023年6月11日上午5:22 • JavaScript

以下是Javascript实现跟随鼠标移动的图片的完整攻略：

第一步：HTML 模板

首先，我们需要创建一个包含图片的 HTML 模板。可以按照以下示例来创建一个基本 HTML 模板：

    <!DOCTYPE html>
    <html>
     <head>
      <title>跟随鼠标移动的图片</title>
     </head>
     <body>
      <div class="container">
       <img src="path_to_image" alt="跟随鼠标移动的图片" id="image">
      </div>
      <script src="path_to_javascript_file"></script>
     </body>
    </html>

第二步：CSS 样式

接下来，需要使用 CSS 来设置图片的样式以及容器的样式。示例如下：

    .container {
      position: relative;
      width: 500px;
      height: 500px;
    }

    #image {
      position: absolute;
      width: 100px;
      height: 100px;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
    }

这些样式可以使图片在包含器中居中。

第三步：JavaScript 代码

现在，我们将添加 JavaScript 代码，使跟随鼠标移动的图片成为可能。以下是示例代码：

    var image = document.getElementById('image');
    document.onmousemove = function(event) {
      var mouseX = event.clientX;
      var mouseY = event.clientY;

      image.style.left = mouseX - 50 + 'px';
      image.style.top = mouseY - 50 + 'px';
    }

这段代码中，首先获取图片的元素，然后使用 document.onmousemove 事件监听器，它会在鼠标移动时触发。然后获取鼠标的 X 和 Y 坐标，并通过设置图片的样式来改变它的位置（使用 mouseX 和 mouseY 减去图片宽度的一半，以使鼠标指向图片的中心）。这样设置之后，图片就会在鼠标移动时跟随鼠标移动。

示例一：蓝色眼睛

下面的代码展示了一组示例。首先，我们将创建一个 HTML 模板，然后添加 CSS 样式和 JavaScript 代码，使图片跟随鼠标移动。这里，我们将使用两个示例，第一个示例是蓝色眼睛。以下是完整的代码：

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="UTF-8">
        <title>示例 - 跟随鼠标移动的图片</title>
        <style>
          body {
            margin: 0;
            overflow: hidden;
          }
          .container {
            position: relative;
            width: 100%;
            height: 100vh;
          }
          img {
            position: absolute;
            width: 150px;
            height: 150px;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            pointer-events: none;
          }
        </style>
      </head>
      <body>
        <div class="container">
          <img src="https://images.unsplash.com/photo-1521338633546-ae8d1ee1a4f8?ixlib=rb-1.2.1&auto=format&fit=crop&w=334&q=80" alt="跟随鼠标移动的眼睛" id="blue-eye" />
        </div>
        <script>
          var blueEye = document.getElementById('blue-eye');
          document.onmousemove = function(e) {
            var x = e.clientX;
            var y = e.clientY;
            blueEye.style.left = x - 75 + 'px';
            blueEye.style.top = y - 75 + 'px';
          };
        </script>
      </body>
    </html>

在这里，我们使用了 Unsplash 网站上的一张图片，并设置了以下 CSS 样式：

body：用于使网页全屏
.container：居中图片并使它填满整个屏幕
img：用于设置图片的样式和设置图片默认不被点击

我们还向 JavaScript 代码添加了事件监听器，每当鼠标移动时都调用该代码。在其中，我们获取了蓝色眼睛元素的引用，并将其移动到鼠标的位置。让我们试试！

示例二：紫色薰衣草

接下来，我们来尝试另一个示例：紫色薰衣草。我们将使用同样的 HTML 模板和 CSS 样式，但是我们会更改 JavaScript 代码以使其适应新的示例。以下是完整代码：

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="UTF-8">
        <title>示例 - 跟随鼠标移动的图片</title>
        <style>
          body {
            margin: 0;
            overflow: hidden;
          }
          .container {
            position: relative;
            width: 100%;
            height: 100vh;
          }
          img {
            position: absolute;
            width: 150px;
            height: 150px;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            pointer-events: none;
          }
        </style>
      </head>
      <body>
        <div class="container">
          <img src="https://images.unsplash.com/photo-1524468199101-0240ddb4d015?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="跟随鼠标移动的薰衣草" id="lavender" />
        </div>
        <script>
          var lavender = document.getElementById('lavender');
          var x = 0;
          var y = 0;
          setInterval(function() {
            x += (parseInt(Math.random() * 11) - 5);
            y += (parseInt(Math.random() * 11) - 5);
            lavender.style.left = x + 'px';
            lavender.style.top = y + 'px';
          }, 100);
        </script>
      </body>
    </html>

在这个示例中，我们还是用了 Unsplash 网站上的一张图片，但更改了以下 JavaScript 代码：