問題的提出:
在一個用戶列表中,當點擊用戶時候,彈出這個用戶的詳細信息,怎么做?當然了,如果你想彈出一個新頁面,那就算求了,就不用看這個,這個時候如果彈出一個新頁面,就是說會向服務器回發一次,速度就降低了撒,使用最好是直接彈出一個層,然后在這個層里面現實這個人的詳細信息。而這個層你不會讓人家固定在一個地方撒?對不對?好,那你就要去獲取你點擊的地方的X,Y坐標了,但是這樣不行啊,你得指定一個地方啊,如果亂點把這個層彈出來就惱火了撒,所以,咱們就指定只能在一個按鈕上點擊才會彈出這個層,那么現在你就要去獲取這個按鈕的ID了,這樣來間接的獲取這個按鈕的X,Y坐標,因為如果直接用ClientX與ClientY 的話,也不太美觀,要求是對於一條記錄,在指定位置彈出。
我用的AJAX是ASP.NET AJAX,簡單,首先簡歷一個層,托一個UPDATEPANEL上去,然后再整一個FORMVIEW,當然了,還是稍微美化一下哈,不然有點難看。
順便看看獲取點擊對象的ID,簡單:var ID = event.srcElement.ID就可以了。
然后再去獲得這個對象的絕對坐標,怎么去獲得絕對坐標?
JS里面給我們提供的函數只有offsetTop 喝offsetLeft這樣的東西,但是這個值是指定對象相對於上層控件的距離,這樣得到的位置不是相對於屏幕的絕對位置
所以我們只能循環獲取,知道這個對象為最外層的對象,那才得到了對於屏幕的絕對坐標
function getAbsPoint(ID)
{
var x = ID.offsetLeft, y = ID.offsetTop;
while(ID==.offsetParent)
{
x += ID.offsetLeft;
y += ID.offsetTop;
}
這樣我們就獲取這個指定ID屬性相對於屏幕的絕對坐標。
還有一種方法,
function getAbsPoint(obj)
{
var x,y;
oRect = obj.getBoundingClientRect();
x=oRect.left;
y=oRect.top;
}
這種方法要簡單些,不過有時候取得的坐標值不穩定,原因不曉得,所以我就用的第一種方法,好了
獲得了這個對象的X,Y絕對坐標后,后面定位層的位置你就曉得該囊個做了撒?
document.getElementById("div1").style.left = x;
當然了,這個層的position肯定是absolute,不然界面就難看了。
alert("x:"+x+","+"y:"+y);
順便整幾個JS常用函數
JS中獲得窗口屬性的方法
1。獲得屏幕的分辨率:
screen.width
screen.height
2。獲得窗口大小:
document.body.clientWidth
document.body.clientHeight
3。獲得窗口大小(包含Border、Scroll等元素)
document.body.offsetWidth
document.body.offsetHeight