鼠标点击某处时可以让小精灵移动到鼠标点击的地方, 让精灵跟随鼠标移动

Sunny.982

已于 2022-10-13 21:08:18 修改

阅读量525

点赞数

分类专栏：码农文章标签： html css 前端 js

于 2022-10-13 21:06:04 首次发布

本文链接：https://blog.csdn.net/qq_56244419/article/details/127309483

版权

码农专栏收录该内容

6 篇文章 1 订阅

订阅专栏

鼠标点击页面某处的时候可以让小精灵移动到该处

css代码:

<style>
      html,
      body {
        height: 100%;
        width: 100%;
        background-color: black;
        /* 根据图片的背景色调整页面背景色 */
        overflow: hidden;
      }
      img {
        width: 100px;
        /* border: 1px solid red; */
        /* 定位 */
        position: absolute;
      }
</style>

html代码:

<img src="./images/girl.gif" alt="" />

script代码

var oImg = document.querySelector("img");
      //在整个文档里移动
      //获取元素的自身宽度
      // oImg.offsetWidth
      //oImg.offsetHeight
      document.onmousemove = function (e) {
        oImg.style.left = e.pageX - oImg.offsetWidth / 2 + "px";
        oImg.style.top = e.pageY - oImg.offsetHeight / 2 + "px";
      };
      //鼠标点击
      document.onclick = function (e) {
        oImg.style.left = e.pageX - oImg.offsetWidth / 2 + "px";
        oImg.style.top = e.pageY - oImg.offsetHeight / 2 + "px";
      };

小精灵图片: