Maison >interface Web >js tutoriel >Comment implémenter le suivi de la souris en JavaScript
Comment implémenter le suivi de la souris en JavaScript
- 藏色散人original
- 2021-06-27 10:18:022891parcourir
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.
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;
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)
Le suivi de la souris est ce qui se passe lorsque la souris bouge.
Point 3 :
document.documentElement.scrollTop || document.body.scrollTop;
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";
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>[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!