案例-跟随鼠标的天使【前端实现】

目录

案例说明：

案例分析：

代码实现：

图片引用

案例说明：

        天使图片跟随鼠标移动，利用鼠标移动事件mousemove

案例分析：

         （1）鼠标不断的移动，使用鼠标移动事件： mousemove

         （2）在页面中移动，给document注册事件 

         （3）图片要移动距离，而且不占位置，我们使用绝对定位即可

         （4）为了得到鼠标的x和y坐标 给img的 top和left 就可以实现图片移动

 *核心原理: 每次鼠标移动，我们就会获得新的鼠标坐标， 把获得的这个x和y坐标做为图片的top和left 就可以移动图片

代码实现：

    

HTML部分
  <img src="../img/angle.gif">

css部分
  <style>
        img {
            position: absolute；
        }
    </style>

js部分
  <script>
        var pic = document.querySelector("img");
        document.addEventListener("mousemove", function (e) {
            //核心原理: 每次鼠标移动，我们都会获得最新的鼠标坐标， 把这个x和y坐标做为图片的top和left 就可以移动图片
            pic.style.left = e.pageX - 40 + "px"; //这里减的40是图片宽度的一半，目的是让鼠标箭头显示在图片中间
            pic.style.top = e.pageY - 34 + "px";//与上同理 记得加px！！
        })
    </script>

       

图片引用

@神经质土豆