<!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>
拖拽改變層大小例如:瀏覽器的窗口大小改變
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.