js imite la page de connexion Baidu pour atteindre les compétences effect_javascript de la fenêtre de glissement-js tutoriel-php.cn

js imite la page de connexion Baidu pour atteindre les compétences effect_javascript de la fenêtre de glissement

WBOY

Libérer： 2016-05-16 15:11:00

original

1543 Les gens l'ont consulté

Dans le développement Web, l'effet glisser de la souris est très courant. Par exemple, sur la page de connexion de Baidu, cliquer sur connexion fera apparaître une fenêtre, et cette fenêtre peut être déplacée ; alors, comment obtenir un tel effet glisser ? En fait, la mise en œuvre est très simple, et il est facile de comprendre son principe ; la première chose à faire est d'impliquer les trois événements de la souris, à savoir l'appui, le déplacement et le relâchement de la souris dans ces trois événements, la position de la souris ; l'élément souris est calculé respectivement.

Copier le code

/*******
   拖拽原理1：
   拖拽状态 = 0 
   鼠标在元素上按下的时候 {
      拖拽状态 = 1
      记录下鼠标的x和y坐标
      记录下元素的x和y坐标
   }
   鼠标在元素上移动的时候 {
      如果拖拽状态是0就什么也不做。
      如果拖拽状态是1， 那么
      元素y = 现在鼠标y - 原来鼠标y + 原来元素y
      元素x = 现在鼠标x - 原来鼠标x + 原来元素x
   }
   鼠标在任何时候放开的时候 {
      拖拽状态 = 0
   }
   将以上思路翻译成JS代码就可以实现拖拽的效果了。
*******/
上面这个原理也可以演变为：
/*******
   拖拽原理2：
   拖拽状态 = 0 
   鼠标在元素上按下的时候 {
      拖拽状态 = 1
      记录下鼠标的x和y坐标
      记录下元素的x和y坐标
      元素的偏移值X=元素的X-元素的offsetLeft
      元素的偏移值Y=元素的Y-元素的offsetTop
   }
   鼠标在元素上移动的时候 {
      如果拖拽状态是0就什么也不做。
      如果拖拽状态是1， 那么
      元素y = 现在鼠标y -元素的偏移值X
      元素x = 现在鼠标x -元素的偏移值Y
   }
   鼠标在任何时候放开的时候 {
      拖拽状态 = 0
   }
   将以上思路翻译成JS代码就可以实现拖拽的效果了。
*******/

Copier après la connexion

Les deux idées ci-dessus sont en fait les mêmes. Il convient de noter que dans l'événement move, la position du bord de l'élément doit également être traitée pour empêcher l'élément d'être déplacé hors du navigateur lorsqu'il est déplacé ; au code directement :

Code 1 :

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>JS拖拽</title>
  <style>
  *{padding: 0; margin: 0; }
  .box{width: 100px;height: 100px;background: blue;position: absolute; }
  </style>
  <script>
    var isDown = false;
    var ObjLeft, ObjTop, posX, posY, obj;
    window.onload = function() {
      obj = document.getElementById('box');
      obj.onmousedown = down;
      document.onmousemove = move;
      document.onmouseup = up;
    }

    function down(event) {
      obj.style.cursor = "move";
      isDown = true;
      ObjLeft = obj.offsetLeft;
      ObjTop = obj.offsetTop;
      posX = parseInt(mousePosition(event).x);
      posY = parseInt(mousePosition(event).y);
    }

    function move(event) {
      if (isDown == true) {
        var x = parseInt(mousePosition(event).x - posX + ObjLeft);
        var y = parseInt(mousePosition(event).y - posY + ObjTop);
        var w = document.documentElement.clientWidth - obj.offsetWidth;
        var h = document.documentElement.clientHeight - obj.offsetHeight;
        console.log(x + ',' + y);
        if (x < 0) {
          x = 0
        } else if (x > w) {
          x = w
        };
        if (y < 0) {
          y = 0
        }else if (y > h) {
          y= h
        };

        obj.style.left = x + 'px';
        obj.style.top = y + 'px';
      }
    }

    function up() {
      isDown = false;
    }
    
    function mousePosition(evt) {
      var xPos, yPos;
      evt = evt || window.event;
      if (evt.pageX) {
        xPos = evt.pageX;
        yPos = evt.pageY;
      } else {
        xPos = evt.clientX + document.body.scrollLeft - document.body.clientLeft;
        yPos = evt.clientY + document.body.scrollTop - document.body.clientTop;
      }
      return {
        x: xPos,
        y: yPos
      }
    }
  </script>
</head>
<body>
  <div id="box" class="box"></div>
</body>
</html>

Copier après la connexion

Code 2 :

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>JS拖拽</title>
  <style>
  *{padding: 0; margin: 0; }
  .box{width: 100px;height: 100px;background: blue;position: absolute; }
  </style>
  <script>
    var isDown = false;
    var ObjLeft, ObjTop, posX, posY, obj,offsetX,offsetY;
    window.onload = function() {
      obj = document.getElementById('box');
      obj.onmousedown = down;
      document.onmousemove = move;
      document.onmouseup = up;
    }

    function down(event) {
      obj.style.cursor = "move";
      isDown = true;
      ObjLeft = obj.offsetLeft;
      ObjTop = obj.offsetTop;
      posX = parseInt(mousePosition(event).x);
      posY = parseInt(mousePosition(event).y);
      offsetX=posX-ObjLeft;
      offsetY=posY-ObjTop;
    }

    function move(event) {
      if (isDown == true) {
        var x=mousePosition(event).x-offsetX
        var y=mousePosition(event).y-offsetY
        var w = document.documentElement.clientWidth - obj.offsetWidth;
        var h = document.documentElement.clientHeight - obj.offsetHeight;
        console.log(x + ',' + y);
        x=Math.min(w,Math.max(0,x));
        y=Math.min(h,Math.max(0,y));
        obj.style.left = x + 'px';
        obj.style.top = y + 'px';
      }
    }

    function up() {
      isDown = false;
    }
    
    function mousePosition(evt) {
      var xPos, yPos;
      evt = evt || window.event;
      if (evt.pageX) {
        xPos = evt.pageX;
        yPos = evt.pageY;
      } else {
        xPos = evt.clientX + document.body.scrollLeft - document.body.clientLeft;
        yPos = evt.clientY + document.body.scrollTop - document.body.clientTop;
      }
      return {
        x: xPos,
        y: yPos
      }
    }
  </script>
</head>
<body>
  <div id="box" class="box"></div>
</body>
</html>

Copier après la connexion

Le code 1 correspond au principe 1, le code 2 correspond au principe 2, l'effet est le même, mais le principe 2 évolue sur la base du principe 1. Après l'évolution, le traitement des bords du changement d'élément est également effectué en conséquence.

Ce qui précède représente l’intégralité du contenu de cet article, j’espère qu’il sera utile à l’étude de chacun.