Maison > interface Web > js tutoriel > js pour simuler des événements de glissement de souris (avec des exemples d'images et de texte)

js pour simuler des événements de glissement de souris (avec des exemples d'images et de texte)

藏色散人
Libérer: 2022-08-07 10:14:12
avant
3839 Les gens l'ont consulté

L'exemple dans cet article partage 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 consiste à conserver la boîte et la position relative de la souris restent inchangées, et l'effet de glissement est obtenu en appuyant et en déplaçant la souris. Comment obtenir l'effet de glissement ?

Nous devons utiliser trois fonctions : onmousedown, onmousemove, onmouseup, qui représentent respectivement la souris vers le bas, le mouvement de la souris et la souris vers le haut.

Dans la fonction de rappel de souris enfoncée, nous devons transmettre clientX et clientY obtiennent la position initiale de la souris, obtiennent la position initiale de la boîte via offsetLeft et offsetTop, puis calculent la position initiale de la souris et de la boîte La différence de position initiale

onmousedownonmousemoveonmouseup,分别表示鼠标按下、鼠标移动、鼠标抬起

鼠标按下的回调函数中,我们需要通过clientXclientY获取鼠标的初始位置,通过offsetLeftoffsetTop获取盒子的初始位置,然后计算鼠标初始位置和盒子初始位置的差值;

鼠标移动的回调函数中,我们需要根据鼠标的位置和之前计算得到的差值来获取盒子现在的位置,然后改变其left和top值,不要忘记将position设置为absolute(因为我就忘记了。。。)

鼠标抬起的回调函数中,我们需要清除鼠标移动和鼠标抬起,通过将onmousemoveonmouseupDans la fonction de rappel du mouvement de la souris span>, nous avons besoin d'obtenir la position actuelle de la boîte en fonction de la différence entre la position de la souris et la valeur précédemment calculée, puis de modifier ses valeurs de gauche et du haut. N'oubliez pas de définir la position sur absolue (. parce que j'ai oublié...)

Dans Mouse up, nous devons effacer le mouvement de la souris et la souris vers le haut, en ajoutant onmousemove et onmouseup Définissez simplement la valeur sur nullAussi

faites 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 souris la fonction d'appui appartient à p, et le mouvement de la souris et le soulèvement de la souris appartiennent au document

Parce que nous ne voulons pas dire que la souris se déplace dans p, mais dans toute la page

Les points clés sont probablement ceux-ci, voici le code :

Recommandations associées : [

Tutoriel vidéo 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!

Étiquettes associées:
source:jb51.net
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal