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

主要功能代码如下
点下面这个超链接去我的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
    }
}

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

发布了37 篇原创文章 · 获赞 20 · 访问量 6762

猜你喜欢

转载自blog.csdn.net/qq_39051175/article/details/99680030