javascript页面鼠标移动挂件 -- 案例

原创于 2021-09-29 01:02:00 发布 · 277 阅读

CC 4.0 BY-SA版权

文章标签：

这篇博客展示了如何使用JavaScript实现一个简单的HTML元素跟随鼠标移动的效果。通过监听mousemove事件，动态更新图片元素的left和top样式属性，使得图片始终与鼠标保持固定距离。此示例涉及前端开发中的JavaScript交互和CSS定位知识。

js页面鼠标移动挂件 @Draven

效果预览
html代码
css代码
js代码

效果预览

在这里插入图片描述

html代码

	<img src="img/2.gif" alt="">

css代码

    <style>
        img{
            position: absolute;
            width: 50px;
            height: 50px;
        }
    </style>

js代码

<script>
    var img = document.querySelector('img')
    document.addEventListener('mousemove',function (e) {
        //鼠标移动事件，记录移动时的坐标，赋值给img的top（Y） 和 left（X）
        img.style.left= e.pageX-25+'px'
        img.style.top= e.pageY-25+'px'
    })
</script>