JavaScript與Div對層定位和移動獲得座標的實現代碼

1:移動圖層 獲得點的x軸y軸座標，從而進行絕對位置(注意：豎拉框會影響 x 軸 y 軸座標值) 複製代碼 代碼如下:var x,y,z,down=false,obj
function init(){
obj=event.srcElement //事件觸發對象
obj.setCapture() //設定屬於當前對象的滑鼠捕捉
z=obj.style.zIndex //擷取對象的z軸座標值
//設定對象的z軸座標值為100，確保當前層顯示在最前面
obj.style.zIndex=100
x=event.offsetX //擷取滑鼠指標位置相對於觸發事件的對象的X座標
y=event.offsetY //擷取滑鼠指標位置相對於觸發事件的對象的Y座標
down=true //布爾值，判斷滑鼠是否已按下，true為按下，false為未按下
}
function moveit(){
//判斷滑鼠已被按下且onmouseover和onmousedown事件發生在同一對象上
if(down&&event.srcElement==obj){
with(obj.style){
/*設定對象的X座標值為文檔在X軸方向上的滾動距離加上當前滑鼠指標相當於文檔對象的X座標值減滑鼠按下時指標位置相對於觸發事件的對象的X座標*/
// posLeft=event.x-x;
posLeft=document.body.scrollLeft+event.x-x;
/*設定對象的Y座標值為文檔在Y軸方向上的滾動距離加上當前滑鼠指標相當於文檔對象的Y座標值減滑鼠按下時指標位置相對於觸發事件的對象的Y座標*/
// posTop=event.y-y;
posTop=document.body.scrollTop+event.y-y;
window.status="posLeft="+posLeft+",posTop="+posTop;
window.status=window.status+"clientX="+event.clientX+"clientY="+event.clientY+"scrollLeft="+document.body.scrollLeft+"scrollTop="+document.body.scrollTop+",event.y="+event.y+",event.x"+event.x;
}
}
}
function stopdrag(){
//onmouseup事件觸發時說明滑鼠已經鬆開，所以設定down變數值為false
down=false
obj.style.zIndex=z //還原對象的Z軸座標值
obj.releaseCapture() //釋放當前對象的滑鼠捕捉
//alert("X:"+obj.style.left+";Y:"+obj.style.top);
}

2:為了使圖層在不同解析度瀏覽器上顯示同樣的效果，我們需要對圖層定位設定

第一步：對最外層 進行相對定位
複製代碼 代碼如下:<div id="t" style="position:relative;top:0px;left:0px;"> </div>

第二步：在相對裡面進行決對定位(這樣圖層就不會隨著解析度的改變而變形) 複製代碼 代碼如下:<div id="t" style="position:relative;top:0px;left:0px;">
<div id="tt" style="position:absolute;top:9px;left:317px;">
<IMG id="hong" SRC="main/1.jpg" WIDTH="8" HEIGHT="8" BORDER="0"
ALT="" />
</div>
<div >省略</div>
<div >省略</div>
<div >省略</div>
<div >省略</div>
<div >省略</div>
<div >省略</div>
<div >省略</div>
<div >省略</div>
<div >省略</div>

//===================（層移動方法調用）============================= 複製代碼 代碼如下:<div onmousedown=init() onmousemove=moveit()
onmouseup=stopdrag()
style="position:absolute;left:60;top:190;width:5;height:5;z-index:99;;border:1px solid #000000;">
D
</div>
</div>