裁剪布局
<!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>