Comment implémenter le suivi de la souris en JavaScript-js tutoriel-php.cn

Comment implémenter le suivi de la souris en JavaScript

藏色散人

Libérer： 2021-06-27 10:18:02

original

2781 Les gens l'ont consulté

Comment implémenter le suivi de la souris en JavaScript : 1. Définissez "evt || window.event;" 2. Créez "function(evt)" ; 3. Créez "document.body.scrollTop;" ; . Attribuez simplement la position actuelle de la souris à la valeur de position de l'élément.

Comment implémenter le suivi de la souris en JavaScript

L'environnement d'exploitation de cet article : système Windows 7, version JavaScript 1.8.5, ordinateur Dell G3.

Comment implémenter le suivi de la souris en JavaScript ?

Méthode JS pour implémenter un effet de suivi de souris simple

Méthode JS pour implémenter un effet de suivi de souris simple. L'analyse spécifique est la suivante :

Suiveur de la souris, comme son nom l'indique, lorsque la souris bouge, il y a une animation qui bouge avec la souris.

Point 1 :

var oEvent = evt || window.event;

Copier après la connexion

Ceci est écrit pour être compatible avec ie et ff Sous ie, window.event représente l'objet événement, tandis que sous ff, il l'est. pour l'événement La fonction passe un paramètre qui représente l'objet événement.

Point 2 :

document.onmousemove = function(evt)

Copier après la connexion

Le suivi de la souris est ce qui se passe lorsque la souris bouge.

Point 3 :

document.documentElement.scrollTop || document.body.scrollTop;

Copier après la connexion

C'est pour la compatibilité avec Chrome et les autres navigateurs. La distance entre la barre de défilement et le défilement supérieur utilise cette dernière. d'autres navigateurs utilisent celui de devant.

Point 4 :

oTop.style.top=oEvent.clientY+scrolltop+10+"px";

Copier après la connexion

Attribuez la position actuelle de la souris à la valeur de position de l'élément lorsque la souris bouge.

oEvent.clientY est la position actuelle des coordonnées Y de la souris. La distance ajoutée par scrolltop est écrite de telle sorte que lors du défilement vers un écran autre que le premier écran, l'effet de suivi de la souris reste inchangé.

Le code est le suivant :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>无标题文档</title>
<style>
body{margin:0; padding:0}
#to_top{
width:30px;
height:40px;
padding:20px;
font:14px/20px arial;
text-align:center;
background:#06c;
position:absolute;
cursor:pointer;
color:#fff
}
</style>
<script>
window.onload = function(){
 var oTop = document.getElementById("to_top");
 document.onmousemove = function(evt){
  var oEvent = evt || window.event;
  var scrollleft = document.documentElement.scrollLeft || document.body.scrollLeft;
  var scrolltop = document.documentElement.scrollTop || document.body.scrollTop;
  oTop.style.left = oEvent.clientX + scrollleft +10 +"px";
  oTop.style.top = oEvent.clientY + scrolltop + 10 + "px";
 }
}
</script>
</head>
<body style="height:1000px;">
<a href="#">文字</a>
<div id="to_top">鼠标跟随</div>
</body>
</html>

Copier après la connexion

[Apprentissage recommandé : Tutoriel avancé javascript]

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!