实现效果图:
鼠标拖拽: 鼠标拉扯:
代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#box{
width: 150px;
height: 150px;
background: green;
position: absolute;
left: 200px;
top: 100px;
}
</style>
</head>
<body>
<div id="box"></div>
<script>
var x = 0;
var y = 0;
var l = 0;
var t = 0;
var isDown = false;
var Box=document.getElementById("box");
Box.onmousedown=function(ev){
var ev=ev||event;
//记录鼠标的坐标
var x=ev.clientX;
var y=ev.clientY;
var b="";
//记录box原先的宽高和定位值
var W=Box.offsetWidth;
var L=Box.offsetLeft;
var H=Box.offsetHeight;
var T=Box.offsetTop;
if(x>Box.offsetLeft+Box.clientWidth-20){
//当鼠标落下的地方在box的右边的时候,改变b的值
b='right';
Box.style.cursor = 'e-resize';
}else if(x<Box.offsetLeft+20){
//当鼠标落下的地方在box的左边的时候,改变b的值
b='left';
Box.style.cursor = 'e-resize';
}else if(y>Box.offsetTop+Box.clientHeight-20){
//当鼠标落下的地方在box的下边的时候,改变b的值
b='bottom';
Box.style.cursor = 's-resize';
}else if(y<Box.offsetTop+20){
//当鼠标落下的地方在box的上边的时候,改变b的值
b='top';
Box.style.cursor = 's-resize';
}
else
{
//获取x坐标和y坐标
x = ev.clientX;
y = ev.clientY;
//获取左部和顶部的偏移量
l = Box.offsetLeft;
t = Box.offsetTop;
//开关打开
isDown = true;
//设置样式
Box.style.cursor = 'move';
}
document.onmousemove=function(ev){
var ev=ev||event;
//记录鼠标坐标
var disX=ev.clientX;
var disY=ev.clientY;
//根据b的值来执行不同的动作
//当box缩放到一定程度停止缩放
//box的宽/高度值等于原来的宽/高度加上原先鼠标的坐标值与新的鼠标坐标值之差
//box的定位值等于原来的定位值加上原先鼠标的坐标值与新的鼠标坐标值之差
switch (b){
case 'right':
Box.style.width=W+disX-x+"px";
if(Box.clientWidth<=50){
Box.style.width=50+'px';
}
break;
case 'left':
Box.style.width=W-disX+x+"px";
Box.style.left=L+disX-x+"px";
if(Box.clientWidth<=50){
Box.style.width=50+'px';
Box.style.left=L+W-50+'px';
}
break;
case 'bottom':
Box.style.height=H+disY-y+"px";
if(Box.clientHeight<=50){
Box.style.height=50+'px';
}
break;
case 'top':
Box.style.height=H-disY+y+"px";
Box.style.top=T+disY-y+"px";
if(Box.clientHeight<=50){
Box.style.height=50+'px';
Box.style.top=T+H-50+'px';
}
break;
}
if (isDown == false) {
return;
}
//获取x和y
var nx = ev.clientX;
var ny = ev.clientY;
//计算移动后的左偏移量和顶部的偏移量
var nl = nx - (x - l);
var nt = ny - (y - t);
Box.style.left = nl + 'px';
Box.style.top = nt + 'px';
}
document.onmouseup=function(){
document.onmousemove=null;
//开关关闭
isDown = false;
Box.style.cursor = 'default';
}
return false;
}
</script>
</body>
</html>