获取鼠标相对某个div的偏移量

最新推荐文章于 2022-10-26 09:14:31 发布

大数据球球

最新推荐文章于 2022-10-26 09:14:31 发布

阅读量2.4k

点赞数

分类专栏： js学习文章标签： JS

本文链接：https://blog.csdn.net/Q1059081877Q/article/details/49385291

版权

js学习专栏收录该内容

16 篇文章 0 订阅

订阅专栏

怎么获取鼠标划过相对某个div的偏移量

如果这个div结构很简单的情况下可以考虑看一下下面的代码：

很有用的

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(function(){
var isFirefox=navigator.userAgent.toUpperCase().indexOf("CHROME");
var d3=$("#d3");
var d2=$("#d2");
var d1=$("#d1");
$(d2).hide();
$(d1).mousemove(function(e){
	var x;
	var y;
	var x2;
	var y2;
	if(isFirefox==-1){
					e = e || window.event;
					x=e.offsetX;
					y=e.offsetY;
					x2=e.clientX;
					y2=e.clientY;
				}else{
					x=event.offsetX;
					y=event.offsetY;
					x2=event.clientX;
					y2=event.clientY;
				}
var a="相对坐标x:"+x+",Y:"+y+"<br>";
var a2="页面坐标x:"+x2+",Y:"+y2;
$(d3).show();
$(d3).empty().append(a+a2);
})
$(d1).click(function(){
	var x;
	var y;
	if(isFirefox==-1){
		x=e.offsetX;
		y=e.offsetY;
	}else{
		x=event.offsetX;
		y=event.offsetY;

	}

var a="x:"+x+",Y:"+y;

$(d2).show();
$(d2).css("top",y).css("left",x);
$(d2).empty().append(a);
})
$(d1).mouseout(function(){
$(d2).hide();
})
})
</script>
<style>
#d1{ width:500px; height:300px; background:#CCC; border:1px solid #666; position:relative; left:100px; top:100px; }
#d2{ height:22px; display:block; line-height:22px; background:#FFF; border:1px solid #FF0; position:absolute; }
#d3{ position:relative; left:100px; top:100px; }
</style>
</head>

<body>
<div id="d1">点击也可查看当前坐标<br>注意div有一个像素的边框
<div id="d2"></div>
</div>
<div id="d3"></div>
</body>
</html>

ok 了

想要得到某个div对应client窗口的左边的距离var left = $(this).offset().left;