jquery獲取當(dāng)前元素的坐標(biāo)

秘書倒水 2017-03-27

展開全文

jquery獲取當(dāng)前元素的坐標(biāo)

1，獲取對象

var obj = $("#id號"); 或 var obj = $(this);

實例中我獲取的對象是彈出窗口按鈕，這樣創(chuàng)建的新窗口就會根椐按鈕的位置進行調(diào)整，實例中將創(chuàng)建的新窗口顯示的按鈕的右下角。

2，獲取對象元素的位置(offset()方法)

var offset = obj.offset();

獲取對象元素的位置，分別是元素的top和left，調(diào)用方法是：offset.left和offset.top，可知當(dāng)前對象的左部和頂部位置。

3，獲取對象元素的寬度(width()方法)

var right = offset.left+obj.width();

實例中是獲取對象的右下角位置，創(chuàng)建新窗口的左部位置。

4，獲取對象元素的高度(height()方法)

var down = offset.top+obj.height();

實例中是獲取對象的右下角位置，創(chuàng)建新窗口的頂部位置。

JQuery 獲得絕對,相對位置的坐標(biāo)方法

var X = $(''#DivID'').offset().top;
var Y = $(''#DivID'').offset().left;
獲取相對(父元素)位置:
var X = $(''#DivID'').position().top;
var Y = $(''#DivID'').position().left;

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www./TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www./1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>java Test</title>
</head>
<style type="text/css">

</style>
<script type="text/javascript" src="js/jquery.js"></script>

<body>
<div style="background:#ccc;height:300px;" onclick=""></div>
<div style="position:relative;">
<div style=" position:absolute;left:50px; top:50px;" id="DivID"></div>
</div>
<script type="text/javascript">
var X = $(''#DivID'').offset().top;
var Y = $(''#DivID'').offset().left;
document.write(X+"<br />");
document.write(Y+"<br />");
//獲取相對(父元素)位置:
var C = $(''#DivID'').position().top;
var D = $(''#DivID'').position().left;
document.write(C+"<br />");
document.write(D);
</script>
</body>
</html>

在移動端使用html5的觸屏事件主要就是為了解決靈敏度的問題傳統(tǒng)的js或者jquery有的時候在移動端靈敏度是不行的。

js：touchstart使用e.touches[0]獲取坐標(biāo),touchmove,touchend 使用e.changedTouches[0]獲取坐標(biāo)

jQuery：通通使用e.originalEvent.targetTouches[0]獲取坐標(biāo)

-------------------------
主要是三個事件:touchstart、touchmove、touchend
touchstart：手指頭觸摸屏幕上的事件
touchmove：手指頭在屏幕上滑動觸發(fā)的事件
touchend：當(dāng)手指從屏幕上離開的時候觸發(fā)
利用jquery配合使用方法如下：
$("#demoid").bind(''touchstart'',function(){ //代碼處理});
---------在移動端用到最多的出就是觸碰點的獲取我們就講講觸碰點問題：
那么先說明pc端，在pc端直接使用e.pageX和e.pageY進行獲取就完全ok了但是
在移動端是無法識別這個東西的，而且在不同的事件下獲取鼠標(biāo)的觸碰點還是
不同的，下面詳細介紹在touchstart、touchmove、touchend三種事件下的鼠標(biāo)
位置點獲?。?/span>
（1）touchstart事件下獲取：e.originalEvent.targetTouches[0].pageX
說明：由于手指頭是多點觸摸到屏幕上的我們所以e.originalEvent.targetTouches的
意思是一個手指觸碰點集合我們只需要獲取第一個點就可以了所以
e.originalEvent.targetTouches[0]，所以位置.pageX .pageY就ok了
（2）touchmove事件獲取：這個和（1）的獲取方式是一樣的就不多說了
（3）touchend事件的獲?。篹3.originalEvent.changedTouches[0].pageX
下面是其他的一些介紹：
每個Touch對象包含的屬性如下。
clientX：觸摸目標(biāo)在視口中的x坐標(biāo)。
clientY：觸摸目標(biāo)在視口中的y坐標(biāo)。
identifier：標(biāo)識觸摸的唯一ID。
pageX：觸摸目標(biāo)在頁面中的x坐標(biāo)。
pageY：觸摸目標(biāo)在頁面中的y坐標(biāo)。
screenX：觸摸目標(biāo)在屏幕中的x坐標(biāo)。
screenY：觸摸目標(biāo)在屏幕中的y坐標(biāo)。
target：觸目的DOM節(jié)點目標(biāo)。