DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> javascript獲取當前鼠標坐標的方法
javascript獲取當前鼠標坐標的方法
編輯:關於JavaScript     

本文實例講述了javascript獲取當前鼠標坐標的方法。分享給大家供大家參考。具體實現方法如下:

對於javascript獲取當前鼠標坐標來說,得對不同浏覽器的坐標位置有所了解。具體代碼如下:
復制代碼 代碼如下:<html>
<head>
<title>javascript獲取當前鼠標坐標</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<script type="text/javascript">
 function mousePosition(ev){
  if(ev.pageX || ev.pageY){//firefox、chrome等浏覽器
   return {x:ev.pageX,y:ev.pageY};
  }
  return {// IE浏覽器
   x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
   y:ev.clientY + document.body.scrollTop - document.body.clientTop
  };
 }
 function mouseMove(ev){
  ev = ev || window.event;
  var mousePos = mousePosition(ev);
  document.getElementById('x').innerHTML = mousePos.x;
  document.getElementById('y').innerHTML = mousePos.y;
 }
 document.onmousemove = mouseMove;
</script>
<style type="text/css">
h3{color:blue;}
p{line-height:30px;height:30px;font-size:14px;width:500px;}
span{color:orange;font-weight:bold;}
</style>
</head>
<body>
 <h3>您的鼠標已經被跟蹤</h3>
 <p> X 軸坐標:<span id="x"></span></p>
 <p> Y 軸坐標:<span id="y"></span></p>
</body>
</html>

希望本文所述對大家的javascript程序設計有所幫助。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved