问个问题，为什么会溢出，就是上面的触点以及下面的触点如果拉过头了它会带动其他的边一起移动，怎么修改好一点
html：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
body {
background: #333;
}
#box {
position: absolute;
top: 100px;
left: 200px;
width: 460px;
height: 360px;
}
#img1 {
opacity: 0.7;
position: absolute;
top: 0;
left: 0;
}
#img2 {
position: absolute;
top: 0;
left: 0;
clip: rect(0, 200px, 200px, 0);
}
#main {
position: absolute;
border: 1px solid white;
height: 200px;
width: 200px;
}
.minDiv {
position: absolute;
height: 8px;
width: 8px;
background: white;
}
.left-up {
left: -4px;
top: -4px;
cursor: nw-resize;
}
.up {
left: 50%;
margin-left: -4px;
top: -4px;
cursor: n-resize;
}
.right-up {
right: -4px;
top: -4px;
cursor: ne-resize;
}
.left {
top: 50%;
left: -4px;
margin-top: -4px;
cursor: w-resize;
}
.right {
top: 50%;
right: -4px;
margin-top: -4px;
cursor: e-resize;
}
.left-down {
bottom: -4px;
left: -4px;
cursor: sw-resize;
}
.down {
left: 50%;
margin-left: -4px;
bottom: -4px;
cursor: s-resize;
}
.right-down {
bottom: -4px;
right: -4px;
cursor: se-resize;
}
</style>
<script type="text/javascript" src="text.js"></script>
</head>
<body>
<div id="box">
<img src="1.jpg" id="img1" /> <img src="1.jpg" id="img2" />
<div id="main">
<div id="left-up" class="minDiv left-up"></div>
<div id="up" class="minDiv up"></div>
<div id="right-up" class="minDiv right-up"></div>
<div id="left" class="minDiv left"></div>
<div id="right" class="minDiv right"></div>
<div id="left-down" class="minDiv left-down"></div>
<div id="down" class="minDiv down"></div>
<div id="right-down" class="minDiv right-down"></div>
</div>
</div>
</body>
</html>
js：
/**
*
*/
window.onload = function() {
var rightDiv = document.getElementById("right");
var upDiv = document.getElementById("up");
var leftDiv = document.getElementById("left");
var downDiv = document.getElementById("down");
var leftUpDiv = document.getElementById("left-up");
var rightUpDiv = document.getElementById("right-up");
var leftDownDiv = document.getElementById("left-down");
var rightDownDiv = document.getElementById("right-down");
var mainDiv = document.getElementById("main");
var keyPress = false;
var contact = "";
rightDiv.onmousedown = function() {
keyPress = true;
contact = "right";
}
upDiv.onmousedown = function() {
keyPress = true;
contact = "up";
}
leftDiv.onmousedown = function() {
keyPress = true;
contact = "left";
}
downDiv.onmousedown = function() {
keyPress = true;
contact = "down";
}
leftUpDiv.onmousedown = function() {
keyPress = true;
contact = "left-up";
}
rightUpDiv.onmousedown = function() {
keyPress = true;
contact = "right-up";
}
leftDownDiv.onmousedown = function() {
keyPress = true;
contact = "left-down";
}
rightDownDiv.onmousedown = function() {
keyPress = true;
contact = "right-down";
}
window.onmouseup = function() {
keyPress = false;
contact = "";
}
window.onmousemove = function(e) {
if (keyPress == true) {
switch (contact) {
case "right":
rightMove(e);
break;
case "up":
upMove(e);
break;
case "left":
leftMove(e);
break;
case "down":
downMove(e);
break;
case "left-up":
leftMove(e);
upMove(e);
break;
case "right-up":
rightMove(e);
upMove(e);
break;
case "left-down":
leftMove(e);
downMove(e);
break;
case "right-down":
rightMove(e);
downMove(e);
break;
}
}
}
// right移动
function rightMove(e) {
var x = e.clientX;// 鼠标坐标x
var addWidth = "";// 鼠标移动后选取框增加的宽度
var widthBefore = mainDiv.offsetWidth - 2;// 选取框变化前的宽度
addWidth = x - getPosition(mainDiv).left - widthBefore;
mainDiv.style.width = addWidth + widthBefore + "px";
}
// up移动
function upMove(e) {
var y = e.clientY;// 鼠标坐标y
var addHeight = "";// 鼠标移动后选取框增加的高度
var heightBefore = mainDiv.offsetHeight - 2;// 选取框变化前的高度
addHeight = getPosition(mainDiv).top - y;
mainDiv.style.height = addHeight + heightBefore + "px";
mainDiv.style.top = mainDiv.offsetTop - addHeight + "px";
}
// left移动
function leftMove(e) {
var x = e.clientX;// 鼠标坐标x
var addWidth = "";// 鼠标移动后选取框增加的宽度
var widthBefore = mainDiv.offsetWidth - 2;// 选取框变化前的宽度
addWidth = getPosition(mainDiv).left - x;
mainDiv.style.width = addWidth + widthBefore + "px";
mainDiv.style.left = mainDiv.offsetLeft - addWidth + "px";
}
// down移动
function downMove(e) {
var y = e.clientY;// 鼠标坐标y
var addHeight = "";// 鼠标移动后选取框增加的高度
var heightBefore = mainDiv.offsetHeight - 2;// 选取框变化前的高度
addHeight = y - getPosition(mainDiv).top - mainDiv.offsetHeight;
mainDiv.style.height = addHeight + heightBefore + "px";
}
// 通过offset求出相对于屏幕的距离
function getPosition(node) {
var left = node.offsetLeft;
var top = node.offsetTop;
var parent = node.offsetParent;
while (parent != null) {
left += parent.offsetLeft;
top += parent.offsetTop;
parent = parent.offsetParent;
}
return {
"left" : left,
"top" : top
};
}
}
