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í)說(shuō)明鼠標(biāo)已經(jīng)松開(kāi),所以設(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ì)定位
<div id="t" style="position:relative;top:0px;left:0px;"> </div>
第二步:在相對(duì)里面進(jìn)行決對(duì)定位(這樣圖層就不會(huì)隨著分辨率的改變而變形)
<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)用)=============================
<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>
復(fù)制代碼 代碼如下:
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í)說(shuō)明鼠標(biāo)已經(jīng)松開(kāi),所以設(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ù)制代碼 代碼如下:
<div id="t" style="position:relative;top:0px;left:0px;"> </div>
第二步:在相對(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>
您可能感興趣的文章:
- js實(shí)現(xiàn)鍵盤(pán)控制DIV移動(dòng)的方法
- js+html+css實(shí)現(xiàn)鼠標(biāo)移動(dòng)div實(shí)例
- 利用javascript移動(dòng)div層-javascript 拖動(dòng)層
- javascript DIV實(shí)現(xiàn)跟隨鼠標(biāo)移動(dòng)
- JS onmousemove鼠標(biāo)移動(dòng)坐標(biāo)接龍DIV效果實(shí)例
- javascript實(shí)現(xiàn)鼠標(biāo)點(diǎn)擊頁(yè)面 移動(dòng)DIV
- js拖動(dòng)div 當(dāng)鼠標(biāo)移動(dòng)時(shí)整個(gè)div也相應(yīng)的移動(dòng)
- js實(shí)現(xiàn)鍵盤(pán)操作實(shí)現(xiàn)div的移動(dòng)或改變的原理及代碼
- javascript實(shí)現(xiàn)點(diǎn)擊按鈕讓DIV層彈性移動(dòng)的方法
- JavaScript利用鍵盤(pán)碼控制div移動(dòng)
相關(guān)文章
基于JavaScript實(shí)現(xiàn)繼承機(jī)制之構(gòu)造函數(shù)+原型鏈混合方式的使用詳解
本篇文章是對(duì)構(gòu)造函數(shù)與原型鏈混合方式的使用進(jìn)行了詳細(xì)的分析介紹。需要的朋友參考下2013-05-05前端js中的事件循環(huán)eventloop機(jī)制詳解
這篇文章主要給大家介紹了關(guān)于前端js中事件循環(huán)eventloop機(jī)制的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用js具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05JS實(shí)現(xiàn)的字符串?dāng)?shù)組去重功能小結(jié)
這篇文章主要介紹了JS實(shí)現(xiàn)的字符串?dāng)?shù)組去重功能,結(jié)合實(shí)例形式分析了javascript基于ES6、ES5、ES3及正則實(shí)現(xiàn)數(shù)組去重的相關(guān)操作技巧,需要的朋友可以參考下2019-06-0620個(gè)你不得不知道的JS async/await實(shí)用技巧
JavaScript的async和await關(guān)鍵詞是現(xiàn)代JavaScript異步編程的核心,它們讓異步代碼看起來(lái)和同步代碼幾乎一樣,使得異步編程變得更加直觀(guān)和易于管理,本文介紹20個(gè)關(guān)于async/await的實(shí)用技巧,將大大提升編程效率和代碼的清晰度,需要的朋友可以參考下2023-12-12原生JS實(shí)現(xiàn)圖片輪播與淡入效果的簡(jiǎn)單實(shí)例
下面小編就為大家?guī)?lái)一篇原生JS實(shí)現(xiàn)圖片輪播與淡入效果的簡(jiǎn)單實(shí)例。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-08-08