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; 復(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"> <!-- 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的觸屏事件主要就是為了解決靈敏度的問(wèn)題傳統(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)手指從屏幕上離開(kāi)的時(shí)候觸發(fā) 利用jquery配合使用方法如下： $("#demoid").bind(''touchstart'',function(){ //代碼處理}); ---------在移動(dòng)端用到最多的出就是觸碰點(diǎn)的獲取我們就講講觸碰點(diǎn)問(wèn)題： 那么先說(shuō)明pc端，在pc端直接使用e.pageX和e.pageY進(jìn)行獲取就完全ok了但是 在移動(dòng)端是無(wú)法識(shí)別這個(gè)東西的，而且在不同的事件下獲取鼠標(biāo)的觸碰點(diǎn)還是 不同的，下面詳細(xì)介紹在touchstart、touchmove、touchend三種事件下的鼠標(biāo) 位置點(diǎn)獲取： （1）touchstart事件下獲?。篹.originalEvent.targetTouches[0].pageX 說(shuō)明：由于手指頭是多點(diǎn)觸摸到屏幕上的我們所以e.originalEvent.targetTouches的 意思是一個(gè)手指觸碰點(diǎn)集合我們只需要獲取第一個(gè)點(diǎn)就可以了所以 e.originalEvent.targetTouches[0]，所以位置.pageX .pageY就ok了 （2）touchmove事件獲?。哼@個(gè)和（1）的獲取方式是一樣的就不多說(shuō)了 （3）touchend事件的獲?。篹3.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)在頁(yè)面中的x坐標(biāo)。 pageY：觸摸目標(biāo)在頁(yè)面中的y坐標(biāo)。 screenX：觸摸目標(biāo)在屏幕中的x坐標(biāo)。 screenY：觸摸目標(biāo)在屏幕中的y坐標(biāo)。 target：觸目的DOM節(jié)點(diǎn)目標(biāo)。 |
|
|
來(lái)自： 秘書(shū)倒水 > 《js相關(guān)》
