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擷取滑鼠座標執行個體