纯js实现裁剪布局

最新推荐文章于 2024-08-02 05:15:54 发布

江呱呱

最新推荐文章于 2024-08-02 05:15:54 发布

阅读量510

点赞数

分类专栏： js 文章标签： js

本文链接：https://blog.csdn.net/weixin_46500485/article/details/108391427

版权

js 专栏收录该内容

76 篇文章 2 订阅

订阅专栏

纯js实现裁剪布局

<!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>
        var img = document.querySelector('.ovh img')
        var area = document.querySelector("#area")
        var dot = document.querySelector("#dot");
        var cut = document.querySelector('.cut');
        // onselectstart 事件是选中的事件
        document.onselectstart = function(e) {
                e.preventDefault();
            }
            // ondragstart 事件是拖拽事件
        document.ondragstart = function(e) {
            e.preventDefault();
        }
        //当右下角的按钮鼠标按下时
        dot.onmousedown = function(e) {
            // e.preventDefault()
            //阻止事件冒泡  否则事件将会影响到 选择框移动的效果  因为用的都是document.onmousemove
            e.stopPropagation();
            //得到鼠标按下时  鼠标的初始位置
            firstX = e.clientX;
            firstY = e.clientY;
            //得到鼠标按下时  cut元素的初始大小
            firstWidth = cut.clientWidth;
            firstHeight = cut.clientHeight;
            //得到鼠标按下时 cut元素距离父元素也就是大图片的距离
            firstLeft = cut.offsetLeft;
            firstTop = cut.offsetTop;
			//当鼠标按下且移动的时候
            document.onmousemove = function(e) {
				//得到当前鼠标的位置
                nowX = e.clientX;
                nowY = e.clientY;
				//算法：鼠标当前的位置-去鼠标刚刚按下时的位置 得到需要添加的大小 加上cut元素之前原有的大小  就是最新的大小
                resultX = nowX - firstX + firstWidth;
                resultY = nowY - firstY + firstHeight;
                //元素越界判定
                if (resultX < 0) {
                    resultX = 0
                }
                //大图的元素大小  减去cut元素原本距离父元素的top和left距离 也就是能放大的最大范围
                else if (resultX > area.clientWidth - firstLeft) {
                    resultX = area.clientWidth - firstLeft;
                }
                if (resultY < 0) {
                    resultY = 0
                } else if (resultY > area.clientHeight - firstTop) {
                    resultY = area.clientHeight - firstTop;
                }
                //将最新的宽高赋值给cut元素
                cut.style.width = resultX + 'px';
                cut.style.height = resultY + 'px'

            }
        }



		//当cut元素被按下时
        cut.onmousedown = function(e) {
        	//得到当前鼠标的位置
            firstMouseX = e.clientX;
            firstMouseY = e.clientY;
            //得到当前元素距离父元素也就是area的top和left值
            firstLeft = cut.offsetLeft;
            firstTop = cut.offsetTop;
            // console.log(1);
			//当鼠标按下且移动的时候
            document.onmousemove = function(e) {
            	//得到当前鼠标最新的位置
                nowX = e.clientX;
                nowY = e.clientY;
                //算法 鼠标最新的位置-鼠标一开始的位置 得到应该移动的距离  + 元素一开始的位置 =最新的位置
                var resultX = nowX - firstMouseX + firstLeft;
                var resultY = nowY - firstMouseY + firstTop;
                if (resultX < 0) {
                    resultX = 0
                } else if (resultX > area.clientWidth - cut.clientWidth) {
                    resultX = area.clientWidth - cut.clientWidth
                }
                if (resultY < 0) {
                    resultY = 0
                } else if (resultY > area.clientHeight - cut.clientHeight) {
                    resultY = area.clientHeight - cut.clientHeight
                }
                cut.style.left = resultX + 'px';
                cut.style.top = resultY + 'px';
                img.style.left = -resultX + 'px';
                img.style.top = -resultY + 'px';

            }
        }
        document.onmouseup = function() {
            document.onmousemove = null
        }
    </script>
</body>

</html>