JS div跟随鼠标移动

最新推荐文章于 2024-08-12 14:11:38 发布

boonyaxnn

最新推荐文章于 2024-08-12 14:11:38 发布

阅读量6.5k

点赞数 3

分类专栏： JavaScript

本文链接：https://blog.csdn.net/boonyaxnn/article/details/89180997

版权

本文介绍了如何使用JavaScript实现div元素跟随鼠标移动的效果。关键在于设置div的position属性，并通过offsetLeft和offsetTop来获取鼠标相对div的偏移距离。

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

一、在body里面新建一个div

<div class="box">

二、在css里面写上样式

PS：一定要写上定位position，因为offsetLeft、offsetTop计算的是当前元素的外边距到已经定位的父元素内边距的水平或者垂直的距离。

<style>
    .box {
        height: 200px;
        width: 200px;
        border: 2px solid skyblue;
        position: absolute;
        left: 100px;
        top: 100px;
    }
</style>

三、js代码如下

<script>
    //1.获取页面元素
    var box = document.querySelector('.box');
    //设置开关判断鼠标是在box否按下
    var flag = false;
    //2.box绑定鼠标按下事件
    var delX = 0;
    var delY = 0;
    box.onmousedown = function () {
        flag = true;
        //获取需要删除的距离
         delX = event.clientX - box.offsetLeft;
         delY = event.clientY - box.offsetTop;
    };
    //3.整个文档绑定鼠标移动事件
    document.onmousemove = function () {
        if (flag) {
            //删除多余的距离 保持住按下的位置
            var x =