El color de fondo se puede cambiar de acuerdo con la posición del cursor usando el DOM (Modelo de objetos de documento). En este artículo, usamos la posición del cursor para establecer el valor del fondo.
Enfoque: el enfoque consiste en utilizar la manipulación DOM para cambiar el fondo de acuerdo con la posición del cursor en un momento determinado.
Código HTML: en esta sección, tenemos un código HTML repetitivo simple con una etiqueta div.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content= "width=device-width, initial-scale=1.0" /> <title> How to change background color according to mouse location using JavaScript? </title> </head> <body> <div class="geeks"></div> </body> </html>
Código CSS: en CSS, acabamos de establecer el color de fondo como portada.
<style>
.geeks {
width: 100%;
height: 600px;
background-size: cover;
}
</style>
Nota: Puede establecer un fondo predeterminado.
Código Javascript: en JS, primero seleccione la etiqueta div usando la función querySelector y tenemos la propiedad de desplazamiento para obtener la posición del cursor en el plano 2-D, es decir, los ejes X e Y. Ahora establecemos el valor del fondo usando las coordenadas.
<script>
var div =
document.querySelector(".geeks");
div.addEventListener(
"mousemove", function (e) {
x = e.offsetX;
y = e.offsetY;
div.style.backgroundColor
= `rgb(${x}, ${y}, ${x - y})`;
});
</script>
Código completo: es la combinación de las tres secciones de código anteriores.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,
initial-scale=1.0" />
<title>
How to change background color
according to mouse location
using JavaScript ?
</title>
<style>
.geeks {
width: 100%;
height: 600px;
background-size: cover;
}
</style>
</head>
<body>
<div class="geeks"></div>
<script>
var div =
document.querySelector(".geeks");
div.addEventListener(
"mousemove", function (e) {
x = e.offsetX;
y = e.offsetY;
div.style.backgroundColor
= `rgb(${x}, ${y}, ${x - y})`;
});
</script>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por sirohimukul1999 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA