📌  相关文章
📜  如何使用 HTML CSS 和 jQuery 创建跟随效果？(1)

📅  最后修改于: 2023-12-03 15:23:51.789000             🧑  作者: Mango

如何使用 HTML CSS 和 jQuery 创建跟随效果？

跟随效果通常用于页面中某个元素跟随鼠标或滚动条进行移动。下面将介绍如何使用 HTML、CSS 和 jQuery 创建跟随效果。

HTML 结构

首先，我们需要在 HTML 中添加一个需要跟随的元素，例如一个小球。

<div class="ball"></div>
CSS 样式

接下来，我们需要为小球添加样式，并将其定位到页面中心。

.ball {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: red;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
jQuery 代码

接着，我们需要使用 jQuery 监听鼠标移动事件，并将小球的位置设置为鼠标的位置。

$(document).mousemove(function(event) {
  $('.ball').css({
    left: event.pageX,
    top: event.pageY
  });
});

此时，小球将跟随鼠标进行移动。如果想要实现小球跟随页面滚动进行移动，可以使用 $(document).scroll(function(){ ... }) 监听滚动事件，并将小球的位置设置为滚动条的位置。

完整代码
<!DOCTYPE html>
<html>
<head>
  <title>跟随效果</title>
  <style>
    .ball {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      background-color: red;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  </style>
  <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
  <script>
    $(document).mousemove(function(event) {
      $('.ball').css({
        left: event.pageX,
        top: event.pageY
      });
    });
  </script>
</head>
<body>
  <div class="ball"></div>
</body>
</html>