原生JS实现跟着鼠标移动的图片效果

最新推荐文章于 2022-03-29 15:37:35 发布

原创最新推荐文章于 2022-03-29 15:37:35 发布 · 975 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#原生 #JS #跟着鼠标移动 #图片

昨天不是才上过班吗?怎么今天又要上班? 专栏收录该内容

100 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现鼠标移动时图片跟随的技术。通过监听鼠标移动事件，获取鼠标位置，并更新图片元素的位置属性，使图片实时跟随鼠标移动。代码中处理了浏览器兼容性问题，确保在不同环境下都能正常工作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

主要功能代码如下
点下面这个超链接去我的github下载这个文件，打开即可运行
https://github.com/xcy10988/-JS-.git

var img = document.getElementById('img');
document.onmousemove = function (e) {
    // 处理兼容性
    e = e || window.event;
    img.style.position = 'absolute';
    img.style.left = getPage(e).pageX + 'px';
    img.style.top = getPage(e).pageY + 'px';

}


//获取页面滚动出去的距离 并处理兼容性
function getScroll() {
    return {
        scrollTop: document.documentElement.scrollTop || document.body.scrollTop,
        scrollLeft: document.documentElement.scrollLeft || document.body.scrollLeft
    }
}


//获取鼠标在页面上的坐标
function getPage(e) {
    return {
        pageX: e.clientX + getScroll().scrollLeft,
        pageY: e.clientY + getScroll().scrollTop
    }
}

效果图就不发了，因为截图的时候鼠标会隐藏，就只剩图片。