master

分支 (1)

管理

管理

master

web-front-end
/
移动的小球.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>移动的小球</title>
    <style>
        .circle {
            border-radius: 50%;
            width: 100px;
            height: 100px;
            background-color: rgb(255, 0, 0);
            position: absolute;
            cursor: grab;
        }
        .circle-inside{
            border-radius: 50%;
            width: 20px;
            height: 20px;
            background-color: rgb(64, 0, 255);
            position: absolute;
            display: none;
        }
</style>
</head>
<body>
        <div class="circle" id="myElement"></div>
        <div class="circle-inside"></div>

        <script>
            const mouseCircle = document.querySelector('.circle-inside');
            const element = document.getElementById('myElement');//获取了id为myElement的元素
            let isMove = false;//鼠标是否拖动
            let offsetX, offsetY;//记录位置坐标

        element.addEventListener('mousedown', (e) => {//鼠标监听器，记录鼠标移动后位置坐标
            isMove = true;
            offsetX = e.clientX - element.getBoundingClientRect().left;
            offsetY = e.clientY - element.getBoundingClientRect().top;
            element.style.cursor='grabbing';//点击之后小手变抓取
            mouseCircle.style.display = 'block';
        });

        document.addEventListener('mousemove', (e) => {//事件监听器，更新属性使其随鼠标移动
            if (isMove) {
            element.style.left = e.clientX - offsetX + 'px';
            element.style.top = e.clientY - offsetY + 'px';
            mouseCircle.style.left=e.clientX-10+'px';
            mouseCircle.style.top=e.clientY-10+'px';
            }
        });
        document.addEventListener('mouseup', () => {//如果鼠标离开则不拖动
            isMove = false;
            element.style.cursor = 'grab';//小手恢复正常
            mouseCircle.style.display = 'none';
        });
        </script>
</body>
</html>