简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 实时获取鼠标在div中的【坐标】
Blogger Information
Blog 52
fans 1
comment 1
visits 38261
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
实时获取鼠标在div中的【坐标】
小丑0o鱼
Original
2168 people have browsed it

实例

<!doctype html>
<html>
 <head>
  <meta charset=UTF-8>
  <meta name=Generator content=baidu.com>
  <meta name=Author content=作者>
  <meta name=Keywords content=关键词>
  <meta name=Description content=文档描述信息>
    <!--<link rel="stylesheet" type="text/css" href="css.css">
        <link rel="icon" type="image/x-icon" href="img/标题logo"> 
        <script type="text/javascript" src=""></script>                         -->
  <style type="text/css">
	
    #zb{width:500px;height:400px;
	    margin:100px auto 20px;
		border:2px solid red;}
	p{
	   width:500px;height:50px;
	   margin:0 auto;
	   border:2px solid pink;
	   line-height:50px;
	}
  </style>
  <title>页面名称</title>
 </head>
 <body>
  <div id="zb" >
	
  </div>
  <p>坐标为：<b id="show">(0,0)</b></p>
<script type="text/javascript">
window.onload=function(){
        var divObj=document.getElementById('zb');
	   var showObj=document.getElementById('show');
	   divObj.onmousemove=function(event){
	      var e=event || window.event;
          var m_x=e.clientX;//获取鼠标横坐标，x轴坐标
          var m_y=e.clientY;//获取鼠标竖坐标，y轴坐标
		  //获取div的坐标
		  var d_x=this.offsetLeft;
		  var d_y=this.offsetTop;
		  var x=m_x-d_x;
		  var y=m_y-d_y;
          showObj.innerHTML="("+x+","+y+")"
	   }

};
</script>
 </body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

Correction status：Uncorrected

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！