suchen

Heim >Web-Frontend >js-Tutorial >jQuery-Implementierung von div nach Mausbewegungsmethode erklärt

jQuery-Implementierung von div nach Mausbewegungsmethode erklärt

小云云
小云云Original
2018-01-12 09:24:281845Durchsuche

Dieser Artikel stellt vor allem die Verfolgung von Mausbewegungen im Detail vor. Interessierte Freunde können sich darauf beziehen.

Der entscheidende Punkt besteht darin, herauszufinden, wie man die aktuelle Position und die Position der Maus, die aktuelle Position und die Position von p nach der Bewegung erhält:

Verwenden Sie jQuery, um zu erkennen, dass sich p bewegt mit der Bewegung der Maus, nicht mit der Position der Maus selbst! ! Aber die Bewegung von p relativ zur vorherigen Position

Der Code lautet wie folgt: (Achten Sie auf die Erklärung des grünen Teils)


<!DOCTYPE html>
<html>
  <head>
    <meta charset="{utf-8}">
    <title></title>
    <script src="../jquery-3.2.0.js"></script>
    <style>
      .aa{
        height: 100px;
        width: 200px;
        position: absolute;
        background-color: green;
      }
    </style>
  </head>
  <body>
    <p class="aa"></p>
  </body>
</html>
<script>
  $(".aa").mousedown(function(e){
    //设置移动后的默认位置
    var endx=0;
    var endy=0;

    //获取p的初始位置，要注意的是需要转整型，因为获取到值带px
    var left= parseInt($(".aa").css("left"));
    var top = parseInt($(".aa").css("top"));

    //获取鼠标按下时的坐标，区别于下面的es.pageX,es.pageY
    var downx=e.pageX;
    var downy=e.pageY;   //pageY的y要大写，必须大写！！

   //  鼠标按下时给p挂事件
  $(".aa").bind("mousemove",function(es){

    //es.pageX,es.pageY:获取鼠标移动后的坐标
    var endx= es.pageX-downx+left;   //计算p的最终位置
    var endy=es.pageY-downy+top;

    //带上单位
    $(".aa").css("left",endx+"px").css("top",endy+"px")  
  });  
 })
  

  $(".aa").mouseup(function(){
    //鼠标弹起时给p取消事件
    $(".aa").unbind("mousemove")
  })
  
</script>

Unterschied zum folgenden Code (Der endgültige Effekt besteht darin, dass sich p mit der Mausposition bewegt. Wenn Sie den spezifischen Effekt sehen möchten, können Sie ihn einfügen, kopieren und vergleichen, um zu sehen, wo der Unterschied liegt) 


  <script>
$(".aa").mousedown(function(e){
  $(document).bind("mousemove",function(e){
    $(".aa").css("left",e.pageX).css("top",e.pageY)
  });
})
  $(".aa").mouseup(function(){
    $(document).unbind("mousemove")
  })
  </script>

Verwandte Empfehlungen:

10 klassische Web-Maus-Effekte, Abschnittsfreigabe

Tutorial zum Erreichen einer Vergrößerung Effekt auf jQuery-Mausbewegungsbilder

So implementieren Sie den Mauszieheffekt im WeChat-Applet

Das obige ist der detaillierte Inhalt vonjQuery-Implementierung von div nach Mausbewegungsmethode erklärt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Javascript-Implementierung der Fortschrittsbalkenfunktion basierend auf einem TimerNächster Artikel：Javascript-Implementierung der Fortschrittsbalkenfunktion basierend auf einem Timer

In Verbindung stehende Artikel

Mehr sehen