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>