纯js实现裁剪布局

tech2024-06-27 73

纯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>

最新回复(0)