Maison >interface Web >js tutoriel >Implémentation simple de l'effet de glissement JS

Implémentation simple de l'effet de glissement JS

不言original: 2018-03-31 13:36:231166parcourir

Cet article partage avec vous le code pour implémenter simplement l'effet de glisser JS, qui est implémenté à l'aide de l'attribut mobile de Trnsform de CSS3. Les amis dans le besoin peuvent jeter un œil au contenu de cet article

Réalisé. en utilisant l'attribut mobile de CSS3 Trnsform.

Le code est le suivant

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
      #dom{
          width: 50px;
          height: 50px;
          border: 2px solid red;
      }
    </style>
</head>
<body>
    <p id="dom"></p>
    <script>

        (function(){
            let dom = document.getElementById(&#39;dom&#39;);
            let moveX,moveY
            dom.addEventListener(&#39;mousedown&#39;,function (e) { 
                moveX=e.target.offsetWidth;
                moveY=e.target.offsetHeight
                console.log(e);
                document.addEventListener(&#39;mousemove&#39;,move,false)
                
            })
            function move(e){
                if(moveY&& moveY){
                    let width =moveX/2,height = width+moveY;
                    dom.style.transform=&#39;translate(&#39;+(e.x-width)+&#39;px,&#39;+(e.y-height)+&#39;px)&#39;
                }
            }
            document.addEventListener(&#39;mousemove&#39;,move,false)
            document.addEventListener(&#39;mouseup&#39;,function (e) {
                let width =moveX/2,height = width+moveY;
                let i =(e.x-width) +&#39;px&#39;,y=(e.y-height)+&#39;px&#39;;
              
                if(moveX && moveY){
                    document.removeEventListener(&#39;mousemove&#39;,move,false);
                    dom.style.transform=&#39;translate(&#39;+i+&#39;,&#39;+y+&#39;)&#39;;
                    moveY=&#39;&#39;,moveX=&#39;&#39;
                }
                
            })
        })()
    
    
    </script>
</body>
</html>

Recommandations associées :

Implémentation simple de l'effet d'affichage de pagination JSP

Comment implémenter la méthode de compression d'image dans JS

Comment implémenter la fonction de curry automatique exquise dans JS

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!

css3 JS

Déclaration：

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

Article précédent：Interface de connexion sécurisée utilisant AjaxArticle suivant：Interface de connexion sécurisée utilisant Ajax

Articles Liés

Voir plus