1. 程式人生 > >JS 獲取DIV中滑鼠相對位置座標

JS 獲取DIV中滑鼠相對位置座標

<HEAD>  
<TITLE> JS獲取DIV相對座標</TITLE>  
<mce:script type="text/javascript"><!--
	function getX(obj){
		var parObj=obj;  
		var left=obj.offsetLeft;  
	 	while(parObj=parObj.offsetParent){  
	  		left+=parObj.offsetLeft;  
		}  
 		return left;  
	}  
  
	function getY(obj){  
		var parObj=obj;  
		var top=obj.offsetTop;  
		while(parObj = parObj.offsetParent){  
	 		top+=parObj.offsetTop;  
	 	}  
	 return top;  
	}  
  
	function DisplayCoord(event){  
		var top,left,oDiv;  
		oDiv=document.getElementById("demo");  
		top=getY(oDiv);  
		left=getX(oDiv);  
		document.getElementById("mp_x").innerHTML = (event.clientX-left+document.body.scrollLeft)  -2+"px";  
		document.getElementById("mp_y").innerHTML = (event.clientY-top+document.body.scrollTop) -2+"px";  	  
	} 
// --></mce:script>
</HEAD>  
  
<BODY style="margin:40px;" mce_style="margin:40px;">  
<div style="background-color:#000000;color:#0011FF;width:300px;height:300px;
position:absolute;top:80px;left:90px;margin:0px; border:0px;" 
id="demo" onmousemove="DisplayCoord(event)">  
我是DIV,經測試,有2PX的誤差...  
</div>  
當前滑鼠座標為:  
X:<span id="mp_x"></span>  
Y:<span id="mp_y"></span>  
</body>  
</BODY>  
</HTML> 

相關推薦

JS 獲取DIV滑鼠相對位置座標

<HEAD> <TITLE> JS獲取DIV相對座標</TITLE> <mce:script type="text/javascript"><!-- function getX(obj){ var parO

js怎麼通過class獲取div的attr的值

    求助:怎麼根據class類名,獲取樣式中display中的值啊?萬分感謝!!   補充解答: $(".window-shadow").css("display");(使用類選擇器) 該例項中涉及到子視窗和父視窗的知識 倘若設計了

js獲取頁面滑鼠滾輪事件

附加事件 其中經我測試,IE/Opera屬於同一型別,使用attachEvent即可新增滾輪事件。 /*IE註冊事件*/ if(document.attachEvent){      document.attachEvent('onmousewheel

獲取滑鼠實時位置座標

<span style="font-size:18px;"><script type="text/javascript"> //獲取滑鼠實時座標 function mousePosition(ev){ ev = ev || window.e

JQuery、Js獲取元素、滑鼠位置

單機某個元素彈出視窗有時需要動態的獲取元素的位置 例如: 例如圖片中的彈框,如果紅色單詞向右移動,彈窗會顯示不完整 JQuery 獲得絕對,相對位置的座標方法 //獲取頁面某一元素的絕對X,Y座標 var X = $('#ID').offset().

js獲取精確的滑鼠座標

現在很多網站分析系統均要獲取滑鼠座標跟軌跡來繪製雲圖跟滑鼠軌跡,這就 要求滑鼠座標必須要準確才行。但要準確卻有一定困難。 如上圖: 使用者開啟百度首頁,在不同的瀏覽器大小下點選“網站”字型,的座標完全不一致。座標不準確,雲圖,熱點圖何來準確? 對於普通一個

js 選中div的文本

tno ntb 方法 doc alert gets selection dex all function selectText(element) { var text = document.getElementById(element);

js 獲取URL參數

res 獲取值 參數名稱 var blog null match class query function getQueryString() { var result = location.search.match(new RegExp("[\?\&][^

js 獲取url 的參數;

實例 pos 瀏覽器中 date toc 整數 調用方法 cap adding 用JS獲取地址欄參數的方法(超級簡單) 方法一:采用正則表達式獲取地址欄參數:( 強烈推薦,既實用又方便!) function GetQueryString(name) {

js獲取URL指定的值

string 元素 每一個 cati 組元 brush func arc gets function getSearchString(key) { // 獲取URL中?之後的字符 var str = location.search; str = s

使用JS獲取URL參數的方法

彈出 port there href 字串 span window subst var 1、獲取整個URL字符串 要想獲取URL中的參數,首先我們就要獲取到整個URL字符串。我們以http://localhost:8080/Charge/homePage.html?cost

QT相對位置,絕對位置之間的轉換(maptoglobal,mapfromglobal)

控件 map 當前 相對 get global 轉換 nbsp 自己 1. 相對位置:每個Qwidget都能通過pos()獲取到相對自己父類窗口的位置, 2. 絕對位置:pWidget->mapToGlobal(QPoint(0,0)) ;將當前控件的相對位置轉換為屏

node.js獲取url的各個參數

local substr .net sub In csdn 列表 tle CA   實例代碼test.js var http=require(‘http‘); var url=require(‘url‘); var querystring=require(‘queryst

js 獲取字串所有的數字和漢字

var re1 = /(\d{1,3})+(?:\.\d+)?/g var re2 = /[\u4e00-\u9fa5]{2,}/g var str="11我22們33兩個"; var arr1 =

js獲取url 的值,並跳轉相應頁面

實現方法:一:獲取URL帶QUESTRING引數的JAVASCRIPT客戶端解決方案,相當於asp的request.querystring,PHP的$_GET1.函式:<Script language="javascript">function GetRequest() {var url = lo

JS獲取URL引數值的4種方法

  方法一:正則法 function getQueryString(name) {var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');var r = window.location.se

js生成div並在指定位置顯示出來

點選客戶名稱輸入內容 ,觸發post請求向後臺請求資料(模糊查詢)。然後將請求後的資料 生成一個div 在該輸入框下方顯示出來。下面是具體實現方法; js: 建立請求 //建立請求 function createXMLHttpRequest() { xmlHttp = fals

div 滑鼠懸停 和 離開事件 圖片修改 和背景修改

.kuan{        border: 1px solid #1aa094;padding: 10px 0; width: 145px;height:40px;     -webkit-border-radius: 8px;

原生 JS 獲取元素的尺寸和位置

關於元素的尺寸和位置,這原本是 CSS 乾的事,但更多的時候需要用 JavaScript 來獲取這些引數,比如一個很好的例子 js 實現的圖片瀑布流。 在介紹 JS 中的例子之前,先來說明一下 css 中的元素尺寸。 CSS 中的 width 和 height

案例:JS獲取URL引數值的方法

假設位址列地址是:http://localhost:3000/m/productlist.html?search=%E9%9E%8B 思路分析: 1.location.search//得到?search=%E9%9E%8B 2.location.search.substring(1)//"s