Codebeispiel für jQuery, das div implementiert, um der Mausbewegung zu folgen-js-Tutorial-php.cn

Codebeispiel für jQuery, das div implementiert, um der Mausbewegung zu folgen

PHPz

Freigeben： 2018-09-30 16:52:32

Original

4168 Leute haben es durchsucht

Im vorherigen Artikel haben wir das Implementierungsbeispiel von Mausverfolgung in JavaScript ausführlich analysiert. Deshalb stellen wir Ihnen heute den Fall vor, in dem jQuery DIV implementiert, um der Mausbewegung zu folgen!

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 mit der Bewegung von bewegt Maus, nicht die 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)

Weitere Ressourcen für Spezialeffekte finden Sie hier zum PHP-Spezialeffekt-Download-Kanal :Mauseffekte

<!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>

Nach dem Login kopieren

unterscheiden sich vom folgenden Code: (Der endgültige Effekt besteht darin, dass sich p mit der Mausposition bewegt. Wenn Sie 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>

Nach dem Login kopieren

Zusammenfassung:

In diesem Artikel wird Beispielcode verwendet, um den Fall vorzustellen, in dem jQuery DIV implementiert, um der Mausbewegung zu folgen. Ich glaube, meine Freunde, ich habe bereits ein gewisses Verständnis dafür und hoffe, dass es für Ihre Arbeit hilfreich sein wird~

Verwandte Empfehlungen:

Ein einfacher Mausfolge-Eingabeaufforderungseffekt basierend auf JQuery

Implementierung des JavaScript-Mausfolgeeffekts

Js Mausfolgecode, kleine Handklick-Instanzmethode

Das obige ist der detaillierte Inhalt vonCodebeispiel für jQuery, das div implementiert, um der Mausbewegung zu folgen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!