图片跟着鼠标移动

最新推荐文章于 2023-06-18 10:33:25 发布

冷羽飞寒

最新推荐文章于 2023-06-18 10:33:25 发布

阅读量535

点赞数 1

分类专栏： JavaScriptAPI案例文章标签： javascript 前端 css

本文链接：https://blog.csdn.net/2201_75407865/article/details/128160853

版权

JavaScriptAPI案例专栏收录该内容

6 篇文章 0 订阅

订阅专栏

涉及知识点

任何事件都有内置对象event，event代表时间状态。

兼容性： var event=event||window.event;

元素的坐标：

1、clientX、clientY：时间被触发时鼠标指针相对于浏览器页面的水平坐标以及垂直坐标

2、pageX、pageY：时间被触发时鼠标指针相对于文档边缘的水平坐标以及垂直坐标

（有滚动条时client不算滚动条的距离，page算滚动条的距离）

scrollWidth和scrollHeight:获得元素的实际宽度和高度，在内容没有超出盒子时，获得的是盒子的内部高度和宽度。内容超出盒子时获得的是内容实际应有的高度和宽度。当盒子内部存在滚动条时，获得的高度和宽度不包括滚动条。

onmousemove：鼠标移动事件。

成品展示

一、效果展示

图片跟着鼠标移动。

二、代码展示

1、基础框架

一张图片

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

2、CSS样式

无

3、JS代码

给浏览器添加鼠标移动事件，鼠标移动的时候使用event.clientX和event.clientY获取到鼠标距离页面的值。

     var img = document.querySelector("img");
    //onmousemove鼠标移动事件
    document.onmousemove=function() {
        img.style.display="inline-block";
        var event=event||window.event;
        var x=event.clientX;
        var y=event.clientY;
        img.style.left=x- img.scrollWidth/2+"px";
        img.style.top=y- img.scrollHeight/2+"px";
    }