Home > Article > Web Front-end > jQuery implementation of div following mouse movement method explained

jQuery implementation of div following mouse movement method explained

小云云Original: 2018-01-12 09:24:281802browse

This article mainly introduces jQuery to implement p following the mouse movement in detail. It has certain reference value. Interested friends can refer to it. I hope it can help everyone.

The key point is to figure out how to get the current position and position of the mouse, the current position and the position of p after the move:

Use jQuery to realize that p moves with the movement of the mouse, not the position of the mouse itself! ! But the movement of p relative to the previous position

The code is as follows: (pay attention to the explanation of the green part)

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

is different from the following code: ( The final effect is that p moves with the mouse position. If you want to see the specific effect, you can paste, copy and compare to see where the difference is)

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

Related recommendations:

10 classic web mouse special effects sections to share

jQuery mouse movement method to achieve magnification effect on pictures

WeChat How to implement mouse drag effect in mini program

The above is the detailed content of jQuery implementation of div following mouse movement method explained. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Javascript implementation of progress bar function based on timerNext article：Javascript implementation of progress bar function based on timer

See more

jQuery implementation of div following mouse movement method explained

Related articles