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

本文介绍了一种使用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
    }
}

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值