L'exemple de cet article partage avec vous le code spécifique pour réaliser l'effet de glissement de la souris en JavaScript pour votre référence. Le contenu spécifique est le suivant. Le rendu
cette fois est le suivant :
Je pense que la difficulté de cette expérience est de conserver la position relative de la boîte et de la souris inchangée. Comment obtenir l'effet glisser en appuyant et en déplaçant la souris
?
Nous devons utiliser trois fonctions : onmousedown , onmousemove et onmouseup , qui représentent respectivement la pression de la souris, le déplacement de la souris et le levage de la souris.
Dans la fonction de rappel de la pression de la souris , nous devons obtenir la position initiale de la souris via clientX et clientY , et via offsetLeft et offsetTop nous obtenons la position initiale de la boîte, puis calculons la différence entre la position initiale de la souris et la position initiale de la boîte
dans la fonction de rappel du mouvement de la souris , nous devons obtenir la position actuelle de la case en fonction de la différence entre la position de la souris et la position calculée précédemment, puis modifiez ses valeurs gauche et supérieure, n'oubliez pas de définir la position sur absolue (car j'ai juste oublié...)
Dans la fonction de rappel du mouse lift , nous devons effacer le mouvement de la souris et le lift de la souris, en définissant onmousemove et onmouseup sur nullFaites également
attention ! ! !
La fonction de déplacement de la souris et la fonction de levage de la souris doivent être écrites dans la fonction de pression de la souris, car nous devons concevoir le comportement ultérieur après l'action de pression de la souris, et un point très important est :
la fonction de pression de la souris est p, et la fonction de pression de la souris est p. Le déplacement et le soulèvement de la souris sont dans le document
car nous ne voulons pas dire que la souris se déplace dans p, mais déplace toute la page.
Les points clés sont probablement les suivants :
<!DOCTYPE html>.
<html>
<tête>
<méta charset="UTF-8">
<méta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<titre>Document</titre>
<style>
#boîte{
largeur : 100 px ;
hauteur : 100px ;
couleur de fond : aigue-marine ;
rayon de bordure : 14 px ;
boîte-ombre : 2px 2px 6px rgba(0,0,0,.3);
/* Les gentils veulent se déplacer et changer la gauche sans définir le positionnement. . . */
position : absolue ;
}
</style>
</tête>
<corps>
<div id="box"></div>
<script>
let box=document.getElementById("box");
box.onmousedown=fonction(événement){
let disx=event.clientX-box.offsetLeft;
let disy=event.clientY-box.offsetTop;
//Ce n'est pas box.onmousemove, mais document.onmousemove
document.onmousemove=fonction(événement){
box.style.left=event.clientX-disx+'px';
box.style.top=event.clientY-disy+'px';
}
//À écrire dans omniusedown document.onmouseup=function(){
//Les deux doivent être définis sur null
document.onmousemove=null ;
document.onmouseup=null ;
renvoie faux ;
}
}
</script>
</corps>
</html> Recommandations associées : [Tutoriel vidéo JavaScript]
Ce qui précède est le contenu détaillé de js pour simuler des événements de glissement de souris (avec des exemples d'images et de textes. Pour plus d'informations, veuillez prêter attention aux autres articles connexes sur le site Web chinois de PHP). !
