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

以下是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 代码:

  • 首先,我们使用了 setInterval 函数来连续移动图片。
  • 在每个 setInterval 周期内,我们随机生成 x 和 y 坐标的增量,然后使用这些增量重新设置图片的位置。
  • 由于我们使 x 和 y 的增量随机,因此使图片将按随机位置跟随鼠标移动。

让我们查看结果!

本文标题为:javascript实现跟随鼠标移动的图片

基础教程推荐