js获取鼠标坐标实例

标签：style   color   os   java   io   ar   div   cti   代码   

js获取鼠标坐标实例，关键代码如下：

1.js 代码

/*显示坐标*/
	function showTip(obj){
		//if(!$.trim($(obj).html()))
		//	return false;
			
		var event=window.event;
		var element=event.srcElement;
		//var X = $(obj).position().top;
		//var Y = $(obj).position().left;
		//alert(X+","+Y);
		var X = $(obj).offset().top;
		var Y = $(obj).offset().left;

		var e = event || window.event;
		var scrollX = document.documentElement.scrollLeft || document.body.scrollLeft;
		var scrollY = document.documentElement.scrollTop || document.body.scrollTop;
		var px = e.pageX || e.clientX + scrollX;
		var py = e.pageY || e.clientY + scrollY;
		
		$(‘#tipDiv‘).css("top",X+15+scrollY);
		$(‘#tipDiv‘).css("left",Y+10+scrollX);
		$(‘#tipDiv‘).css("width",$(obj).width()+10);
		//X:710 850 Y:430 560
		//var xValue=parseInt(px);
		//var yValue=parseInt(py);

	        $(‘#tipDiv‘).html("x:"+px+" y:"+py);
	        			
		$(‘#tipDiv‘).show();
	}
	
	/*隐藏坐标*/
	function hideTip(obj){
		$(‘#tipDiv‘).hide();
	}

 2.body关键代码

<img class="center-block" src="../../images/map/12345.png" alt="地图" style="height: 640px;" onmousemove="showTip(this)" onmouseout="hideTip(this)" onclick="showCityInfo()">

3.div代码（用于显示坐标）

<div id="tipDiv" style="position: absolute;display:none;text-align:left; border: 1px solid green;z-index: 10000;width:100px;color: red;background-color: #FFF"></div>

js获取鼠标坐标实例

标签：style   color   os   java   io   ar   div   cti   代码   

原文地址：http://my.oschina.net/u/1861837/blog/307040