<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>div的拉伸
</title>
<style type="text/css">
*{padding: 0;margin: 0;}
body{padding: 100px;}
#box{position: absolute;width: 150px;height: 150px;background: orangered;border: 10px solid lightcoral;}
</style>
</head>
<body>
<div id="box"></div>
</body>
<script type="text/javascript">
var oBox = document.getElementById('box');
oBox.onmousedown = function(e){
e = e ||event;
var x = e.clientX;
var y = e.clientY;
var oBoxL = oBox.offsetLeft;
var oBoxT = oBox.offsetTop;
var oBoxW = oBox.offsetWidth;
var oBoxH = oBox.offsetHeight;
var d = 0;
if(x < oBoxL + 10){
d = 'left';
}
else if(x > oBoxL + oBoxW -10){
d = 'right';
}
if(y < oBoxT + 10){
d = 'top';
}
else if(d < oBoxT + oBoxH -10){
d = 'bottom';
}
if(x < oBoxL + 10 && y < oBoxT + 10){
d ='LT';
}
document.onmousemove = function(e){
e = e ||event;
var xx = e.clientX;
var yy = e.clientY;
if(d == 'left'){
oBox.style.width = oBoxW + x -xx + 'px'
oBox.style.left = xx + 'px';
}
else if(d == 'right'){
oBox.style.width = oBoxW + xx -x + 'px'
}
if(d == 'top'){
oBox.style.height = oBoxH + y - yy + 'px';
oBox.style.top = yy + 'px';
}
else if(d == 'bottom'){
oBox.style.height = oBoxH + yy - y + 'px';
}
if(d == 'LT'){
oBox.style.width = oBoxW + x -xx + 'px'
oBox.style.left = xx + 'px';
oBox.style.height = oBoxH + y - yy + 'px';
oBox.style.top = yy + 'px';
}
return false;
}
document.onmouseup = function(){
document.onmousemove = null;
document.onmouseup = null;
}
if(e.preventDefault){
e.preventDefault();
}
}
</script>
</html>
转载请注明原文地址: https://www.6miu.com/read-85128.html
