前端基础--跟随鼠标图标小练习

最新推荐文章于 2024-05-09 11:03:36 发布

鱼与云游

最新推荐文章于 2024-05-09 11:03:36 发布

阅读量158

点赞数

文章标签：前端 javascript html5 css html

本文链接：https://blog.csdn.net/weixin_51983027/article/details/128301069

版权

一、需要掌握的知识
二、思路
1. 阐述
总结

一、需要掌握的知识

css基本样式设置
鼠标事件
mousemove事件

二、思路

1.阐述

首先写一个图标div，在获取这个元素，给document添加事件mousemove，再接着获取鼠标坐标，然后给图标设置定位，根据定位来做这件事的，把鼠标坐标的值赋予给偏移量

代码如下（示例）：

<body>
    <div style="position: absolute; width: 100px; height: 100px; background-color: aqua;"></div>
    <script>
        var div=document.querySelector('div');
        document.addEventListener('mousemove',function(e){
            var x=e.clientX;
            var y=e.clientY;
            div.style.left=x-50 +'px';
            div.style.top=y-50 +'px';
        })
    </script>
</body>