Maison > Article > interface Web > javascript change la position de la souris

javascript change la position de la souris

WBOYoriginal: 2023-05-22 09:11:071305parcourir

JavaScript est un langage de script largement utilisé qui peut être utilisé dans diverses situations telles que l'interaction de pages Web et les effets dynamiques. Parmi eux, changer la position de la souris via JavaScript est une technique courante qui peut aider à obtenir divers effets interactifs intéressants.

Il existe de nombreuses façons de modifier la position de la souris en JavaScript. Les méthodes courantes sont les suivantes :

1. L'utilisation de la méthode window.scrollTo() de JavaScript

window.scrollTo() peut faire passer la page Web à la page spécifiée. emplacement. Parmi eux, vous pouvez définir les coordonnées x et y de la barre de défilement de la page Web. Par conséquent, cette méthode peut être utilisée pour modifier la position de la souris et obtenir l'effet de suivi de la souris.

Voici un exemple de code simple :

<!DOCTYPE html>
<html>
<head>
<title>JavaScript改变鼠标位置</title>
<style>
#pointer {
  position: absolute;
  width: 25px;
  height: 25px;
  background-color: red;
  border-radius: 50%;
  opacity: 0.7;
  transition: all 0.2s ease-in-out;
}
</style>
<script>
function movePointer(event) {
  var pointer = document.getElementById("pointer");
  var x = event.clientX;
  var y = event.clientY;
  window.scrollTo(x, y);
  pointer.style.left = x + "px";
  pointer.style.top = y + "px";
}
</script>
</head>
<body onmousemove="movePointer(event)">
<div id="pointer"></div>
<p>移动鼠标以查看效果</p>
</body>
</html>

Dans le code ci-dessus, un élément div avec l'ID "pointeur" est défini et défini sur un cercle rouge via le style CSS. Ensuite, une fonction "movePointer" est définie en JavaScript, qui est appelée lorsque la souris bouge et modifie la barre de défilement de la page Web via la méthode "window.scrollTo" pour obtenir l'effet de suivi de la souris.

2. Utilisez la méthode document.elementFromPoint() de JavaScript

méthode document.elementFromPoint() pour obtenir l'élément aux coordonnées spécifiées, vous pouvez donc utiliser cette méthode pour obtenir l'élément où se trouve la souris et laisser l'élément se déplacer avec la souris.

Voici un exemple de code :

<!DOCTYPE html>
<html>
<head>
<title>JavaScript改变鼠标位置</title>
<style>
#pointer {
  position: absolute;
  width: 25px;
  height: 25px;
  background-color: red;
  border-radius: 50%;
  opacity: 0.7;
  transition: all 0.2s ease-in-out;
}
</style>
<script>
function movePointer(event) {
  var pointer = document.getElementById("pointer");
  var x = event.clientX;
  var y = event.clientY;
  var element = document.elementFromPoint(x, y);
  if (element) {
    pointer.style.left = x + "px";
    pointer.style.top = y + "px";
    element.appendChild(pointer);
  }
}
</script>
</head>
<body onmousemove="movePointer(event)">
<p>移动鼠标以查看效果</p>
<div><span>元素1</span></div>
<div><span>元素2</span></div>
<div><span>元素3</span></div>
<div><span>元素4</span></div>
<div><span>元素5</span></div>
<div><span>元素6</span></div>
<div><span>元素7</span></div>
<div><span>元素8</span></div>
<div><span>元素9</span></div>
<div><span>元素10</span></div>
<div><span>元素11</span></div>
<div><span>元素12</span></div>
<div><span>元素13</span></div>
<div><span>元素14</span></div>
<div><span>元素15</span></div>
<div><span>元素16</span></div>
<div><span>元素17</span></div>
<div><span>元素18</span></div>
<div><span>元素19</span></div>
<div><span>元素20</span></div>
</body>
</html>

Dans le code ci-dessus, un élément div avec l'ID "pointeur" est défini et une fonction "movePointer" est définie en JavaScript. Cette fonction récupère l'élément sur lequel se trouve la souris en utilisant la méthode document.elementFromPoint() et ajoute l'élément "pointeur" à cet élément.

3. Utilisez les styles CSS pour changer la forme de la souris

En plus de changer la position de la souris, vous pouvez également modifier la forme de la souris grâce aux styles CSS, qui peuvent également obtenir des effets interactifs intéressants dans une certaine mesure.

Ce qui suit est un exemple de code :

<!DOCTYPE html>
<html>
<head>
<title>JavaScript改变鼠标位置</title>
<style>
body {
  cursor: url('https://www.w3schools.com/js/pic_move.png'), auto;
}
</style>
</head>
<body>
<p>移动鼠标查看效果。</p>
</body>
</html>

Dans le code ci-dessus, la forme de la souris est modifiée en image "pic_move.png" via des styles CSS pour obtenir des effets d'interaction de souris intéressants.

En bref, changer la position de la souris via JavaScript est l'une des techniques importantes pour obtenir des effets interactifs dynamiques. Les développeurs peuvent choisir la méthode appropriée pour obtenir l'effet correspondant en fonction des besoins réels.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

JavaScript css pointer

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：javascript cliquez sur cacherArticle suivant：javascript cliquez sur cacher

Articles Liés

Voir plus