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

霄的超

于 2021-09-29 01:02:00 发布

阅读量222

点赞数

文章标签： javascript html5 html

本文链接：https://blog.csdn.net/Messchao/article/details/120540690

版权

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

摘要由CSDN通过智能技术生成

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>