<script type="text/javascript">
function g(id){return document.getElementById(id)}
var mouseOffsetX = 0;
var mouseOffsetY = 0;
isDraging = false;
g('boxR').onmousedown = function(e){
var e =e;
mouseOffsetX = e.clientX - g('boxR').offsetLeft;
mouseOffsetY = e.clientY - g('boxR').offsetTop;
isDraging = true;
}
document.onmousemove =function(e){
var e = e;
var moveX = 0;
var moveY = 0;
if (isDraging === true) {
moveX = e.clientX - mouseOffsetX;
moveY = e.clientY - mouseOffsetY;
g('box').style.width = moveX + 'px';
g('box').style.height = moveY + 'px';
}
}
document.onmouseup =function(e){
isDraging = false;
}
</script> 上面是js部分。<div class="box" id="box">
<div class="boxL" id="boxL"></div>
<div class="boxT" id="oxT"></div>
<div class="boxR" id="boxR"></div>
<div class="boxB" id="oxB"></div>
<div class="boxLT" id="boxLT"></div>
<div class="boxRT" id="boxRT"></div>
<div class="boxLB" id="boxLB"></div>
<div class="boxRB" id="boxRB"></div>
</div>上面是html部分<style media="screen">
.box{width: 200px;height: 200px;position: absolute;left: 100px;top: 100px;border: 1px solid black;}
.boxL,.boxR,.boxT,.boxB,.boxLT,.boxRT,.boxRB,.boxLB{position: absolute;}
.boxL{left: 0;top:50%;width: 10px;height:10px;cursor: w-resize;background:red;}
.boxT{top: 0;left:50%;width:10px;height:10px;cursor: n-resize;background:red;}
.boxR{right:0;top:50%;width:10px;height:10px;cursor: e-resize;background:red;}
.boxB{bottom: 0;left:50%;width:10px;height:10px;cursor: s-resize;background:red;}
.boxLT{left:0;top:0;width:10px;height:10px;background:red;cursor:nw-resize;}
.boxRT{width: 10px;height:10px;cursor:ne-resize;background:red;right:0;top: 0;}
.boxLB{width: 10px;height:10px;cursor:sw-resize;background:red;left:0;bottom:0;}
.boxRB{width: 10px;height:10px;cursor:se-resize;background:red;right:0;bottom:0;}
</style>上面是css部分，求大神们解惑，
添加回答
举报
0/150
提交
取消