js获取鼠标坐标实例

浏览数：32 / 时间：2015年06月09日

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获取鼠标坐标实例