点到哪，就动到哪——鼠标点击特效，得瑟的不止是特效本身

2023-10-20 21:47:44

在上一篇文章中，我们介绍了如何使用HTML、CSS和JavaScript创建各种各样的鼠标点击特效。这些特效可以为你的网页增添趣味性和互动性。不过，如果你想让你的网页更具动感和活力，那么你还可以将鼠标点击特效和鼠标移动特效组合使用。

鼠标移动特效是指当鼠标在网页上移动时，网页上的某些元素也会随之发生变化。例如，你可以让鼠标移动时，网页背景颜色发生变化，或者让网页上的图片移动。

鼠标点击特效和鼠标移动特效的组合使用可以创造出更有趣和互动的网页效果。例如，你可以让用户点击网页上的某个元素时，该元素会移动到鼠标所在的位置。或者，你也可以让用户在网页上拖动某个元素时，该元素会留下痕迹。

总之，鼠标点击特效和鼠标移动特效的组合使用可以让你创建出更具动感和活力的网页效果。如果你想让你的网页更具趣味性和互动性，那么不妨试试使用鼠标点击特效和鼠标移动特效的组合使用。

实现步骤

1. 创建HTML页面

<!DOCTYPE html>
<html>
<head>
  
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div id="box"></div>
  <script src="script.js"></script>
</body>
</html>

2. 创建CSS样式

#box {
  width: 100px;
  height: 100px;
  background-color: red;
  position: absolute;
}

3. 创建JavaScript代码

var box = document.getElementById('box');

box.addEventListener('click', function(event) {
  var x = event.clientX;
  var y = event.clientY;

  box.style.left = x + 'px';
  box.style.top = y + 'px';
});

box.addEventListener('mousemove', function(event) {
  var x = event.clientX;
  var y = event.clientY;

  box.style.left = x + 'px';
  box.style.top = y + 'px';
});