<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>拖拽改变层大小</title>
<style type="text/css">
#div1{
width:100px;
height:100px;
background:red;
position:absolute;
left:500px;
top:200px;
}
</style>
<script type="text/javascript">
window.onload = function(){
var oDiv = document.getElementById("div1");
var b = "";
oDiv.onmousedown = function(ev){
var ev = ev || event;
var disW = this.offsetWidth;//oDiv的宽
var disX = ev.clientX;//鼠标点击的位置距离浏览器可视区左边的距离
var disL = this.offsetLeft;//oDiv的left值
var disH = this.offsetHeight;//oDiv的高
var disY = ev.clientY;//鼠标点击的位置距离浏览器可视区上边的距离
var disT = this.offsetTop;//oDiv的top值
if(disX>disL+disW-10){
// 如果鼠标点击的位置距离浏览器可视区左边的距离大于(oDiv的left值+oDiv的宽-10)
//在这里不用再判断小于(oDiv的left值+oDiv的宽)的情况,因为如果大于了,鼠标早已不在oDiv上了
b = "right"}
if(disX<disL+10){
// 如果鼠标点击的位置距离浏览器可视区左边的距离小于(oDiv的left值+10)
//在这里不用再判断大于(oDiv的left值)的情况,因为如果小于了,鼠标早已不在oDiv上了
b = "left";}
if(disY<disT +10){
// 如果鼠标点击的位置距离浏览器可视区上边的距离小于(oDiv的top值+10)//在这里不用再判断大于(oDiv的top值)的情况,因为如果值小于了,鼠标早已不在oDiv上了
b = "Top";}
if(disY>disT +disH-10){
// 如果鼠标点击的位置距离浏览器可视区上边的距离大于(oDiv的top值+oDiv的高-10)//在这里不用再判断小于(oDiv的top值+oDiv的高)的情况,因为如果值大于了,鼠标早已不在oDiv上了
b = "Bottom";}
document.onmousemove = function(ev){
var ev = ev || event;
switch(b){
case 'right':
oDiv.style.width = disW+(ev.clientX-disX)+"px";
//其中ev.clientX-disX的差值是移动的距离,或正或负值
break;
case "left":
oDiv.style.width = disW-(ev.clientX-disX)+"px";
oDiv.style.left = disL+(ev.clientX-disX)+"px";
break;
case 'Top':
oDiv.style.height = disH-(ev.clientY-disY)+"px";
oDiv.style.top = disT+(ev.clientY-disY)+"px";
break;
case 'Bottom':
oDiv.style.height = disH+(ev.clientY-disY)+"px";
break;
}
}
document.onmouseup = function(){
document.onmousemove = document.onmouseup = null;
}
return false;
}
}
</script>
</head>
<body>
<div id="div1"></div></body>
</html>
拖拽改变层大小例如:浏览器的窗口大小改变
最新推荐文章于 2019-07-17 20:01:09 发布