<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
.upBtn,.downBtn,.upLeftBtn,.upRightBtn,.downLeftBtn,.downRightBtn,.centerLeftBtn,.centerRightBtn
{ position:absolute; background:#CC0000; width:9px; height:9px; z-index:5; }
.upBtn { top:-4px; left:50%; cursor:n-resize; }
.downBtn { bottom:-4px; left:50%; cursor:s-resize; }
.upLeftBtn { top:-4px; left:-4px; cursor:nw-resize; }
.upRightBtn { top:-4px; right:-4px; cursor:ne-resize; }
.downLeftBtn { bottom:-4px; left:-4px; cursor:sw-resize; }
.downRightBtn { bottom:-4px; right:-4px; cursor:se-resize; }
.centerLeftBtn { top:50%; left:-4px; cursor:w-resize; }
.centerRightBtn { top:50%; right:-4px; cursor:e-resize; }
</style>
<script type="text/javascript" >
function $(id) {
return document.getElementById(id);
}
function getEvent(e) {
return e || window.event;
}
function getLocation(e) {
return {
x: e.x || e.clientX,
y: e.y || e.clientY
}
}
var obj = null; // 当前操作的对象
var preview = null; // 要处理的对象
var clickX = 0; // 保留上次的X轴位置
var clickY = 0; // 保留上次的Y轴位置
// 鼠标点击
var onDragDown = function (e, type) {
e = getEvent(e);
var location = getLocation(e);
clickY = location.y;
clickX = location.x;
obj = this;
obj.operateType = type;
preview = $("preview");
return false;
};
var onUpBtnDown = function (e) {
onDragDown(e, "n");
};
var onDownBtnDown = function (e) {
onDragDown(e, "s");
};
var onCenterLeftBtnDown = function (e) {
onDragDown(e, "w");
};
var onCenterRightBtnDown = function (e) {
onDragDown(e, "e");
};
var onUpLeftBtnDown = function (e) {
onDragDown(e, "nw");
};
var onUpRightBtnDown = function (e) {
onDragDown(e, "ne");
};
var onDownLeftBtnDown = function (e) {
onDragDown(e, "sw");
};
var onDownRightBtnDown = function (e) {
onDragDown(e, "se");
};
var onDragUp = function () {
document.body.style.cursor = "auto";
obj = null;
};
var move = function (operateType, location, preview) {
document.body.style.cursor = location + "_resize";
switch (operateType) {
case "e":
var add_length = clickX - location.x;
clickX = location.x;
var length = parseInt(preview.style.width) - add_length;
preview.style.width = length + "px";
break;
case "s":
var add_length = clickY - location.y;
clickY = location.y;
var length = parseInt(preview.style.height) - add_length;
preview.style.height = length + "px";
break;
case "w":
var add_length = clickX - location.x;
clickX = location.x;
var length = parseInt(preview.style.width) + add_length;
preview.style.width = length + "px";
preview.style.left = clickX + "px";
break;
case "n":
var add_length = clickY - location.y;
clickY = location.y;
var length = parseInt(preview.style.height) + add_length;
preview.style.height = length + "px";
preview.style.top = clickY + "px";
break;
}
};
var onDragMove = function (e) {
if (obj) {
e = getEvent(e);
var location = getLocation(e);
switch (obj.operateType) {
case "n":
move("n", location, preview);
break;
case "s":
move("s", location, preview);
break;
case "w":
move("w", location, preview);
break;
case "e":
move("e", location, preview);
break;
case "nw":
move("n", location, preview);
move("w", location, preview);
break;
case "ne":
move("n", location, preview);
move("e", location, preview);
break;
case "sw":
move("s", location, preview);
move("w", location, preview);
break;
case "se":
move("s", location, preview);
move("e", location, preview);
break;
}
}
return false;
};
window.onload = function () {
$("upBtn").onmousedown = onUpBtnDown;
$("downBtn").onmousedown = onDownBtnDown;
$("centerLeftBtn").onmousedown = onCenterLeftBtnDown;
$("centerRightBtn").onmousedown = onCenterRightBtnDown;
$("upLeftBtn").onmousedown = onUpLeftBtnDown;
$("upRightBtn").onmousedown = onUpRightBtnDown;
$("downLeftBtn").onmousedown = onDownLeftBtnDown;
$("downRightBtn").onmousedown = onDownRightBtnDown;
document.onmousemove = onDragMove;
document.onmouseup = onDragUp;
}
</script>
</head>
<body>
<div id="preview" style="width:200px; height:200px; border:1px solid gray; position:absolute; left:200px; top:100px;" >
<div class="upBtn" id="upBtn"></div>
<div class="downBtn" id="downBtn"></div>
<div class="upLeftBtn" id="upLeftBtn"></div>
<div class="upRightBtn" id="upRightBtn"></div>
<div class="downLeftBtn" id="downLeftBtn"></div>
<div class="downRightBtn" id="downRightBtn"></div>
<div class="centerLeftBtn" id="centerLeftBtn"></div>
<div class="centerRightBtn" id="centerRightBtn"></div>
</div>
</body>
</html>
JS实现拖动div改变大小
最新推荐文章于 2024-07-22 08:23:27 发布