Home >Web Front-end >JS Tutorial >Code example of jQuery implementing div to follow mouse movement

Code example of jQuery implementing div to follow mouse movement

PHPzOriginal: 2017-11-18 13:31:084165browse

In the previous article, we analyzed in detail the implementation example of mouse following in JavaScript, so today we will introduce to you the case of jQuery implementing DIV to follow mouse movement!

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)

For more special effects resources, please go to the php special effects download channel ：Mouse special effects

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

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

Summary:

This article uses sample code to introduce the case of jQuery implementing DIV to follow the mouse movement. I believe that my friends have also learned about this I have a certain understanding, I hope it will be helpful to your work~

Related recommendations:

Based on JQuery A simple mouse following prompt effect

Realization of JavaScript mouse following effect

Js The mouse follows the code and the little hand clicks on the instance method

The above is the detailed content of Code example of jQuery implementing div to follow mouse movement. 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：Implementation of JavaScript mouse following effectNext article：Implementation of JavaScript mouse following effect

See more

Code example of jQuery implementing div to follow mouse movement

Related articles