DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> JavaScript綜合知識 >> JS獲取鼠標坐標、獲取鼠標像素點示例
JS獲取鼠標坐標、獲取鼠標像素點示例
編輯:JavaScript綜合知識     

 運行代碼之後隨意移動鼠標的位置,可適時顯現鼠標的坐標點,不占用系統資源

JS獲取鼠標坐標,獲取鼠標像素點的典型實例,運行本頁面後,隨意移動鼠標的位置,可適時顯現鼠標的坐標點,不占用系統資源 。    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  <html xmlns="http://www.w3.org/1999/xhtml">  <head>  <title>JavaScript獲取鼠標坐標</title>  <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  <style type="text/css">  .tip {  width:200px;  border:2px solid #ddd;  padding:8px;  background:#f1f1f1;  color:#666;  }  </style>  <script type="text/javascript">  function mousePos(e){  var x,y;  var e = e||window.event;  return {  x:e.clientX+document.body.scrollLeft+document.documentElement.scrollLeft,  y:e.clientY+document.body.scrollTop+document.documentElement.scrollTop  };  };  function test(e){  document.getElementById("mjs").innerHTML = mousePos(e).x+','+mousePos(e).y;  };  </script>  </head>  <body>  <div id="mjs" class="tip">源碼愛好者</div>  <div id="test" style="width:1000px;height:1000px;background:#ccc;" onmousemove="test(event)"></div>  </body>  </html>      [Ctrl+A 全選 注:如需引入外部Js需刷新才能執行  
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved