Maison > Article > interface Web > Implémentation jQuery de div suivant la méthode de mouvement de la souris expliquée

Implémentation jQuery de div suivant la méthode de mouvement de la souris expliquée

小云云original: 2018-01-12 09:24:281783parcourir

Cet article présente principalement jQuery pour réaliser en détail le mouvement de la souris. Il a une certaine valeur de référence. Les amis intéressés peuvent s'y référer.

Le point clé est de comprendre comment obtenir la position actuelle et la position de la souris, la position actuelle et la position de p après le déplacement :

Utilisez jQuery pour réaliser que p se déplace avec le mouvement de la souris, pas la position de la souris elle-même ! ! Mais le mouvement de p par rapport à la position précédente

Le code est le suivant : (faites attention à l'explication de la partie verte)

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

Différence par rapport au code suivant (L'effet final est que p se déplace avec la position de la souris. Si vous voulez voir l'effet spécifique, vous pouvez coller, copier et comparer pour voir où est la différence)

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

Recommandations associées :

10 sections d'effets de souris Web classiques à partager

Tutoriel sur la façon de réaliser effet de grossissement sur les images de mouvement de la souris jQuery

Comment implémenter l'effet de glissement de la souris dans l'applet WeChat

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!

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：Javascript implémente un exemple de fonction de barre de progression basé sur une minuterieArticle suivant：Javascript implémente un exemple de fonction de barre de progression basé sur une minuterie

Articles Liés

Voir plus