如何使用 JavaScript 根据鼠标位置更改背景颜色?

javascripthtmlfront end technology

JavaScript 是一种著名的编程语言，与 HTML 和 CSS 一起是万维网 (WWW) 的核心语言之一。它允许程序员捕获事件并修改文档对象模型 (DOM)。在本文中，我们将了解如何利用 JavaScript 根据鼠标光标的位置更改背景颜色。

Mousemove 事件

mousemove 是一个事件，当鼠标光标移动时，它会在元素上触发，并且它仍然在相关元素内。它为我们提供了有关光标点的偏移 x 和 y 坐标的信息。

语法

addEventListener('mousemove', (event)=>{});

返回: MouseEvent 对象

算法

我们将利用 mousemove 事件来获取鼠标指针的位置，然后使用此信息来操作背景颜色。为了便于说明，我将元素的背景颜色设置为颜色 RGB(x, y, x+y)，其中 x 和 y 是鼠标指针的坐标。

示例

让我们借助示例来理解这一点。

步骤 1:首先，我们将定义 HTML 代码。

<!DOCTYPE html>
<html>
<head>
   <title>How to change background color according to mouse location using JavaScript?</title>
</head>
<body>
   <h4>How to change background color according to mouse location using JavaScript?</h4>
   <div id="main"></div>
</body>
</html>

步骤 2:现在我们将借助 CSS 为网页提供一些样式。

<style>
   #main {
      width: 100%;
      height: 200px;
      background-size: cover;
      background-color: yellow;
   }
</style>

步骤 3:现在我们将编写使用 movemove 事件改变背景颜色的逻辑。

<script>
let div = document.getElementById("main");

div.addEventListener("mousemove", function(event) {
   let x = event.offsetX;
   let y = event.offsetY;
   div.style.backgroundColor = `rgb(${x%255}, ${y%255}, ${(x + y)%255})`;
});
</script>

以下是完整代码:

<!DOCTYPE html>
<html>

<head>
   <title>How to change background color according to mouse location using JavaScript?</title>
   <style>
      #main {
         width: 100%;
         height: 200px;
         background-size: cover;
         background-color: yellow;
      }
   </style>
</head>

<body>
   <h4>How to change background color according to mouse location using JavaScript?</h4>
   <div id="main"></div>
   <script>
      let div = document.getElementById("main");

      div.addEventListener("mousemove", function (event) {
         let x = event.offsetX;
         let y = event.offsetY;
         div.style.backgroundColor = `rgb(${x%255}, ${y%255}, ${(x + y)%255})`;
      });
   </script>
</body>

</html>