快捷導(dǎo)航

JavaScript與Div對(duì)層定位和移動(dòng)獲得坐標(biāo)的實(shí)現(xiàn)代碼

更新時(shí)間：2010年09月08日 11:28:21 作者：

JavaScript與Div對(duì)層定位和移動(dòng)獲得坐標(biāo)的實(shí)現(xiàn)代碼，需要的朋友可以參考下。

1:移動(dòng)圖層獲得點(diǎn)的x軸y軸坐標(biāo)，從而進(jìn)行絕對(duì)定位(注意：豎拉框會(huì)影響 x 軸 y 軸坐標(biāo)值)

 
var x,y,z,down=false,obj 
function init(){ 
obj=event.srcElement //事件觸發(fā)對(duì)象 
obj.setCapture() //設(shè)置屬于當(dāng)前對(duì)象的鼠標(biāo)捕捉 
z=obj.style.zIndex //獲取對(duì)象的z軸坐標(biāo)值 
//設(shè)置對(duì)象的z軸坐標(biāo)值為100，確保當(dāng)前層顯示在最前面 
obj.style.zIndex=100 
x=event.offsetX //獲取鼠標(biāo)指針位置相對(duì)于觸發(fā)事件的對(duì)象的X坐標(biāo) 
y=event.offsetY //獲取鼠標(biāo)指針位置相對(duì)于觸發(fā)事件的對(duì)象的Y坐標(biāo) 
down=true //布爾值，判斷鼠標(biāo)是否已按下，true為按下，false為未按下 
} 
function moveit(){ 
//判斷鼠標(biāo)已被按下且onmouseover和onmousedown事件發(fā)生在同一對(duì)象上 
if(down&&event.srcElement==obj){ 
with(obj.style){ 
/*設(shè)置對(duì)象的X坐標(biāo)值為文檔在X軸方向上的滾動(dòng)距離加上當(dāng)前鼠標(biāo)指針相當(dāng)于文檔對(duì)象的X坐標(biāo)值減鼠標(biāo)按下時(shí)指針位置相對(duì)于觸發(fā)事件的對(duì)象的X坐標(biāo)*/ 
// posLeft=event.x-x; 
posLeft=document.body.scrollLeft+event.x-x; 
/*設(shè)置對(duì)象的Y坐標(biāo)值為文檔在Y軸方向上的滾動(dòng)距離加上當(dāng)前鼠標(biāo)指針相當(dāng)于文檔對(duì)象的Y坐標(biāo)值減鼠標(biāo)按下時(shí)指針位置相對(duì)于觸發(fā)事件的對(duì)象的Y坐標(biāo)*/ 
// 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事件觸發(fā)時(shí)說明鼠標(biāo)已經(jīng)松開，所以設(shè)置down變量值為false 
down=false 
obj.style.zIndex=z //還原對(duì)象的Z軸坐標(biāo)值 
obj.releaseCapture() //釋放當(dāng)前對(duì)象的鼠標(biāo)捕捉 
//alert("X:"+obj.style.left+";Y:"+obj.style.top); 
} 

2:為了使圖層在不同分辨率瀏覽器上顯示同樣的效果，我們需要對(duì)圖層定位設(shè)置

第一步：對(duì)最外層進(jìn)行相對(duì)定位

復(fù)制代碼代碼如下:

第二步：在相對(duì)里面進(jìn)行決對(duì)定位(這樣圖層就不會(huì)隨著分辨率的改變而變形)

復(fù)制代碼代碼如下:

 
<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> 

//===================（層移動(dòng)方法調(diào)用）=============================

復(fù)制代碼代碼如下:

 
<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> 

您可能感興趣的文章: