js 特效demo

最新推荐文章于 2023-06-18 07:50:49 发布

原创最新推荐文章于 2023-06-18 07:50:49 发布 · 171 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

拖拽效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>拖拽效果demo</title>
    <style>
        .layer {
            width: 150px;
            height: 150px;
            background-color: red;
            cursor: move;
            /* 设置盒子移动  需要先设置该盒子的定位 */
            position: absolute;
        }
    </style>
</head>

<body>
    <div class="layer">
        aaaaa
    </div>

    <script>
        let layer = document.querySelector('.layer')
        // 定义一个开关  鼠标按下时为 true  抬起时为 false
        // 当鼠标状态为按下时(即为 true) 时，才允许移动
        let canMove = false
        let x = 0, y = 0

        // 记录最大值
        let maxLeft = window.innerWidth - layer.offsetWidth
        let maxtop = window.innerHeight - layer.offsetHeight

        // 鼠标按下
        layer.onmousedown = function (e) {
            canMove = true
            // 求出 鼠标按下时 相对于盒子内部的距离
            x = e.pageX - layer.offsetLeft
            y = e.pageY - layer.offsetTop
        }

        // 鼠标移动(在屏幕任意范围内都可以移动)
        window.onmousemove = function (e) {

            // 1.字被选中时,鼠标抬起事件未被触发,出现 bug
            // 阻止默认行为
            e.preventDefault();
            if (canMove) {
                // 盒子相对于浏览器的距离  =  鼠标位置 - 鼠标相对于盒子内部距离
                let left = e.pageX - x
                let top = e.pageY - y

                // 限制盒子只能在屏幕范围内移动  
                if (left < 0) {
                    left = 0  // 最小距离
                } else if (left > maxLeft) {
                    left = maxLeft  // 最大距离
                }
                if (top < 0) {
                    top = 0   // 最小距离
                } else if (top > maxtop)
                    top = maxtop  // 最大距离

                layer.style.left = left + 'px'
                layer.style.top = top + 'px'
            }
        }

        // 2.当鼠标移动时,弹出广告或者切换页面,当前的活动页面会失去焦点,出现bug
        setTimeout(() => {
            alert('弹出广告')
        },2000)

        window.onblur = function(){
            canMove = false
        }

        // 鼠标抬起
        window.onmouseup = function () {
            canMove = false
        }
    </script>
</body>

</html>