裁剪布局

最新推荐文章于 2024-08-22 10:08:50 发布

棋炜的小宝贝

最新推荐文章于 2024-08-22 10:08:50 发布

阅读量269

点赞数

分类专栏： ES6 裁剪布局文章标签： es6/es7

本文链接：https://blog.csdn.net/XWen_ING/article/details/108635811

版权

ES6 同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

裁剪布局

1 篇文章 0 订阅

订阅专栏

裁剪布局

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .area {
            margin: 0 auto;
            width: 500px;
            height: 500px;
            border: 1px solid #ccc;
            position: relative;
        }

        .mask {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(65, 77, 76, 0.8)
        }

        .cut {
            position: absolute;
            top: 0;
            left: 0;
            width: 100px;
            height: 100px;

        }

        .ovh {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
        }

        img {
            width: 500px;
            height: 500px;
        }

        .dot {
            width: 10px;
            height: 10px;
            position: absolute;
            right: -5px;
            bottom: -5px;
            background-color: red;
            border-radius: 50%;
        }
        .ovh img {
            position: absolute;
            top: 0;
            left: 0;
        }
    </style>
</head>

<body>
    <div id="area" class="area">
        <img src="images/big03.jpg" />
        <div id="mask" class="mask"></div>
        <div id="cut" class="cut">
            <div class="ovh">
                <img src="images/big03.jpg">
            </div>
            <div id="dot" class="dot"></div>
        </div>
    </div>
    <script>
        // onselectstart 事件是选中的事件
        document.onselectstart = function (e) {
            e.preventDefault();
        }
        // ondragstart 事件是拖拽事件
        document.ondragstart = function (e) {
            e.preventDefault();
        }


        // 获取元素
        let dot = document.getElementById("dot");
        let cut = document.getElementById("cut");
        let area = document.getElementById("area");
        let img = document.querySelector(".ovh img");

        // 提前获取area的宽度
        let areaWidth = area.clientWidth;
        let areaHeight = area.clientHeight;
        // 按下dot
        dot.onmousedown = function(e) {
            e.stopPropagation();
            console.log("dot添加按下事件");
            // 鼠标按下的时候 获取元素的宽高 以及 鼠标现在的位置
            // 鼠标现在的位置
            var nowX = e.clientX;
            var nowY = e.clientY;
            var width = cut.clientWidth;
            var height = cut.clientHeight;
            // 绑定移动事件
            document.onmousemove = function(e) {
                // 获取移动后的鼠标位置
                var movedX = e.clientX;
                var movedY = e.clientY;
                // 计算元素移动后的宽度和高度
                var resultX = movedX - nowX + width;
                var resultY = movedY - nowY + height;
                // 边界判定
                if (resultX < 0) {
                    resultX = 0;
                } else if (resultX > areaWidth - cut.offsetLeft) {
                    resultX = areaWidth - cut.offsetLeft;
                } 
                if (resultY < 0) {
                    resultY = 0;
                } else if (resultY > areaHeight - cut.offsetTop) {
                    resultY = areaHeight - cut.offsetTop;
                }
                cut.style.width = resultX + "px";
                cut.style.height = resultY + "px";
            }
        }
        document.onmouseup = function () {
            document.onmousemove = null;
        }
        // 给cut添加mousedown
        cut.onmousedown = function (e) {
            console.log("裁剪区域按下事件")
            // 记住鼠标位置
            let nowX = e.clientX;
            let nowY = e.clientY;
            // 记住元素的定位值
            let left = cut.offsetLeft;
            let top = cut.offsetTop;
            // 给document添加move事件
            document.onmousemove = function (e) {
                // 获取鼠标移动后的位置
                let movedX = e.clientX;
                let movedY = e.clientY;
                // 计算
                let resultX = movedX - nowX + left;
                let resultY = movedY - nowY + top;
                if (resultX < 0) {
                    resultX = 0;
                } else if (resultX > areaWidth - cut.offsetWidth) {
                    resultX = areaWidth - cut.offsetWidth;
                }
                if (resultY < 0) {
                    resultY = 0;
                } else if (resultY > areaHeight - cut.offsetHeight) {
                    resultY = areaHeight - cut.offsetHeight;
                }
                cut.style.left = resultX + "px";
                cut.style.top = resultY + "px";
                img.style.left = -resultX + "px";
                img.style.top = -resultY + "px";
            }
        }
        // 如果不删除事件 可以用dom2级 
        // 如果要删除事件 推荐使用dom0级
    </script>
</body>

</html>