`
huxiuliang
  • 浏览: 117213 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

JavaScript---鼠标位置。

阅读更多
<script type="text/javascript">
function mouseMove(ev){
  ev = ev || window.event;
  var mousePos = mouseCoords(ev);
  document.getElementById('xxx').value = mousePos.x;
  document.getElementById('yyy').value = mousePos.y;
}

function mouseCoords(ev){
  if(ev.pageX || ev.pageY){
    return {x:ev.pageX, y:ev.pageY};
  }
  return {
    x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
    y:ev.clientY + document.body.scrollTop - document.body.clientTop
  };
}

document.onmousemove = mouseMove;
</script>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
X:<input id="xxx" type="text" />  Y:<input id="yyy" type="text" />
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
 
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 
 <style type="text/css" >
 #Div_CnLei {
 border:1px solid #ccc;
 background:#eee;
 line-height:200px;
 text-align:center;
 width:800px;
 height:200px;
 }
</style>
<div id="Div_CnLei"> </div>
<div id="PosXY">移动鼠标到灰色区域内看看!</div>
<script type="text/javascript">
var w3c=(document.getElementById)? true: false;
var agt=navigator.userAgent.toLowerCase();
var ie = ((agt.indexOf("msie") != -1) && (agt.indexOf("opera") == -1) && (agt.indexOf("omniweb") == -1));

function IeTrueBody(){//判断头部是否有标准声明
	return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

function getMousePos(e){
	var curX=(!ie)?e.pageX : event.clientX+IeTrueBody().scrollLeft;
	var curY=(!ie)?e.pageY : event.clientY+IeTrueBody().scrollTop;
	document.getElementById("PosXY").innerHTML = "当前光标的坐标值: X=" + curX + " ,Y=" + curY;
}

document.getElementById("Div_CnLei").onmousemove=getMousePos;
</script>
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics