Maison > Article > interface Web > 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)

藏色散人avant: 2022-08-07 10:13:503809parcourir

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

onmousedown、onmousemove、onmouseup，分别表示鼠标按下、鼠标移动、鼠标抬起

在鼠标按下的回调函数中，我们需要通过clientX和clientY获取鼠标的初始位置，通过offsetLeft和offsetTop获取盒子的初始位置，然后计算鼠标初始位置和盒子初始位置的差值；

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

在鼠标抬起的回调函数中，我们需要清除鼠标移动和鼠标抬起，通过将onmousemove和onmouseupDans 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 :

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box{
            width: 100px;
            height: 100px;
            background-color: aquamarine;
            border-radius: 14px;
            box-shadow: 2px 2px 6px rgba(0,0,0,.3);

            /* 好家伙 都没设置定位  就想移动 改变left。。。 */
            position: absolute;
        }
    </style>
</head>
<body>
    <div id="box"></div>
    <script>
        let box=document.getElementById("box");
        box.onmousedown=function(event){
            let disx=event.clientX-box.offsetLeft;
            let disy=event.clientY-box.offsetTop;
            //此处不是box.onmousemove，是document.onmousemove
            document.onmousemove=function(event){
                box.style.left=event.clientX-disx+&#39;px&#39;;
                box.style.top=event.clientY-disy+&#39;px&#39;;
            }

            //要写在ommousedown里面
            document.onmouseup=function(){
                //这俩都要置为null
            document.onmousemove=null;
            document.onmouseup=null;
            return false;
        }
        }
        
    </script>
</body>
</html>

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!

JavaScript NULL 回调函数 JS 事件 position

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：Deux façons d'implémenter des images qui suivent le mouvement de la souris en utilisant jsArticle suivant：Deux façons d'implémenter des images qui suivent le mouvement de la souris en utilisant js

Articles Liés

Voir plus