基于JS实现动态跟随特效的示例代码

2023年6月11日上午12:47 • JavaScript

下面就是关于“基于JS实现动态跟随特效的示例代码”的攻略。

什么是动态跟随特效？

动态跟随特效，即鼠标在页面上移动时，某个元素会跟随鼠标的移动而移动。这种交互效果可以增加用户的体验感，也可以让网站看起来更加生动有趣。

准备工作

在开始之前，您需要确保您已经熟练掌握了基础的HTML、CSS和JavaScript知识。

示例代码

下面是一段基于JavaScript实现动态跟随特效的示例代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>动态跟随特效示例</title>
    <style>
      #box {
        width: 50px;
        height: 50px;
        background-color: red;
        position: absolute;
      }
    </style>
  </head>
  <body>
    <div id="box"></div>
    <script type="text/javascript">
      var box = document.getElementById('box');
      document.onmousemove = function(event) {
        var e = event || window.event;
        box.style.left = e.clientX + 'px';
        box.style.top = e.clientY + 'px';
      }
    </script>
  </body>
</html>

在这段代码中，我们首先通过CSS设置了一个红色的正方形div，并使用position属性将其设置为绝对定位。

然后，在JavaScript中我们使用document.onmousemove事件监听鼠标移动的事件，并在此事件中获取鼠标的位置信息，使用这个信息来设置我们的box元素的left和top属性的值，从而实现动态跟随特效。

示例说明

下面是两个示例，展示如何在实际中应用上面的示例代码。

示例1：跟随元素

我们可以将示例代码用于一个放置在页面中的图片元素，让这个元素随着鼠标的移动而移动。这种效果非常常见，适用于风格较为复古的网站。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>跟随元素</title>
    <style>
      #image {
        width: 200px;
        height: 200px;
        position: absolute;
        left: 50%;
        top: 50%;
        margin-left: -100px;
        margin-top: -100px;
      }
    </style>
  </head>
  <body>
    <img id="image" src="image.png"/>
    <script type="text/javascript">
      var image = document.getElementById('image');
      document.onmousemove = function(event) {
        var e = event || window.event;
        image.style.left = e.clientX + 'px';
        image.style.top = e.clientY + 'px';
      }
    </script>
  </body>
</html>

在这个示例中，我们将示例代码应用在一个id为“image”的图片上，使这个图片随着鼠标的移动而移动。

示例2：跟随文字

我们还可以将示例代码用于跟随文字的网站上。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>跟随文字</title>
    <style>
      .title {
        font-size: 60px;
        color: #333;
        position: absolute;
        left: 50%;
        top: 50%;
        margin-left: -200px;
        margin-top: -30px;
      }
    </style>
  </head>
  <body>
    <h1 class="title">这是一段示例文字</h1>
    <script type="text/javascript">
      var title = document.getElementsByClassName('title')[0];
      document.onmousemove = function(event) {
        var e = event || window.event;
        title.style.left = e.clientX + 'px';
        title.style.top = e.clientY + 'px';
      }
    </script>
  </body>
</html>

在这个示例中，我们将示例代码应用于一个class为“title”的h1标签上，使这个标签随着鼠标的移动而移动。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：基于JS实现动态跟随特效的示例代码 - Python技术站