jquery獲取當(dāng)前元素的坐標(biāo)
1,獲取對(duì)象
var obj = $("#id號(hào)"); 或 var obj = $(this);
實(shí)例中我獲取的對(duì)象是彈出窗口按鈕,這樣創(chuàng)建的新窗口就會(huì)根椐按鈕的位置進(jìn)行調(diào)整,實(shí)例中將創(chuàng)建的新窗口顯示的按鈕的右下角。
2,獲取對(duì)象元素的位置(offset()方法)
var offset = obj.offset();
獲取對(duì)象元素的位置,分別是元素的top和left,調(diào)用方法是:offset.left和offset.top,可知當(dāng)前對(duì)象的左部和頂部位置。
3,獲取對(duì)象元素的寬度(width()方法)
var right = offset.left+obj.width();
實(shí)例中是獲取對(duì)象的右下角位置,創(chuàng)建新窗口的左部位置。
4,獲取對(duì)象元素的高度(height()方法)
var down = offset.top+obj.height();
實(shí)例中是獲取對(duì)象的右下角位置,創(chuàng)建新窗口的頂部位置。
JQuery 獲得絕對(duì),相對(duì)位置的坐標(biāo)方法
var X = $(''#DivID'').offset().top;
var Y = $(''#DivID'').offset().left;
獲取相對(duì)(父元素)位置:
var X = $(''#DivID'').position().top;
var Y = $(''#DivID'').position().left;
代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>java Test</title>
</head>
<style type="text/css">
<!--
body,div { margin:0; padding:0;}
-->
</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 />");
//獲取相對(duì)(父元素)位置:
var C = $(''#DivID'').position().top;
var D = $(''#DivID'').position().left;
document.write(C+"<br />");
document.write(D);
</script>
</body>
</html>
在移動(dòng)端使用html5的觸屏事件主要就是為了解決靈敏度的問題傳統(tǒng)的js或者jquery有的時(shí)候在移動(dòng)端靈敏度是不行的。
js:touchstart使用e.touches[0]獲取坐標(biāo),touchmove,touchend 使用e.changedTouches[0]獲取坐標(biāo)jQuery:通通使用e.originalEvent.targetTouches[0]獲取坐標(biāo)-------------------------
主要是三個(gè)事件:touchstart、touchmove、touchend
touchstart:手指頭觸摸屏幕上的事件
touchmove:手指頭在屏幕上滑動(dòng)觸發(fā)的事件
touchend:當(dāng)手指從屏幕上離開的時(shí)候觸發(fā)
利用jquery配合使用方法如下:
$("#demoid").bind(''touchstart'',function(){ //代碼處理});
---------在移動(dòng)端用到最多的出就是觸碰點(diǎn)的獲取我們就講講觸碰點(diǎn)問題:
那么先說明pc端,在pc端直接使用e.pageX和e.pageY進(jìn)行獲取就完全ok了但是
在移動(dòng)端是無法識(shí)別這個(gè)東西的,而且在不同的事件下獲取鼠標(biāo)的觸碰點(diǎn)還是
不同的,下面詳細(xì)介紹在touchstart、touchmove、touchend三種事件下的鼠標(biāo)
位置點(diǎn)獲取:
(1)touchstart事件下獲?。篹.originalEvent.targetTouches[0].pageX
說明:由于手指頭是多點(diǎn)觸摸到屏幕上的我們所以e.originalEvent.targetTouches的
意思是一個(gè)手指觸碰點(diǎn)集合我們只需要獲取第一個(gè)點(diǎn)就可以了所以
e.originalEvent.targetTouches[0],所以位置.pageX .pageY就ok了
(2)touchmove事件獲?。哼@個(gè)和(1)的獲取方式是一樣的就不多說了
(3)touchend事件的獲取:e3.originalEvent.changedTouches[0].pageX
下面是其他的一些介紹:
每個(gè)Touch對(duì)象包含的屬性如下。
clientX:觸摸目標(biāo)在視口中的x坐標(biāo)。
clientY:觸摸目標(biāo)在視口中的y坐標(biāo)。
identifier:標(biāo)識(shí)觸摸的唯一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é)點(diǎn)目標(biāo)。