获取页面某一元素的绝对X,Y坐标,可以用offset()方法:
var X = $('#DivID').offset().top;
var Y = $('#DivID').offset().left;
获取相对(父元素)位置,用position().父元素的position必须是relative
var X = $('#DivID').position().top;
var Y = $('#DivID').position().left;
var X = $('#DivID').offset().top;
var Y = $('#DivID').offset().left;
获取相对(父元素)位置,用position().父元素的position必须是relative
var X = $('#DivID').position().top;
var Y = $('#DivID').position().left;
<!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>鼠标处显示div层.htm</title>
<script src="../Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
//JS
function showDetail(event) {
var divDetails = document.getElementById("details");
var x = event.clientX;
var y = event.clientY;
divDetails.style.position = "absolute";
imgPhoto.src = "http://net.itcast.cn/upload/images/site/teacher/zhaoxiaohu.jpg";
divDetails.style.left = x;
divDetails.style.top = y;
divDetails.style.display = "";
alert(x + "y:" + y);
}
function hide() {
document.getElementById("details").style.display = "none";
}
//Jquery写法
$(document).ready(function () {
$("#spanShow").mousemove(function () {
var divDetails = $("#details");
divDetails.css("top", $(this).offset().top).css("left", $(this).offset().left);
divDetails.css("position", "absolute");
$("#imgPhoto").attr("src", "http://net.itcast.cn/upload/images/site/teacher/yzksmall.jpg");
divDetails.show();
alert($(this).offset().left + "top:" + $(this).offset().top);
});
});
</script>
</head>
<body>
<div id="divInfo" style="position: relative;">
<div style="height:100px"></div>
<span id="spanCzbk" style="font-weight: bold">传智播客</span>的事业被越来越多的人知道,加盟到传智播客愿意为此事业奋斗终生的技术牛人也越来越多,如:<a
οnmοusemοve="showDetail(event)" οnmοuseοut="hide();">赵小虎(js显示)</a> <span οnmοuseοut="hide();"
id="spanShow" style="color: Red">杨忠科(Jquery显示)</span>
<div id="details" style="display: none; width: 140px;" οnmοuseοver="this.style.display=''"
οnmοuseοut="this.style.display='none'">
<img id="imgPhoto" src="http://net.itcast.cn/upload/images/site/teacher/yzksmall.jpg" alt='杨忠科' /><br />
姓名:杨中科<br />
简介:杨中科,传智播客。Net学科创始人、如鹏网发起人。2005年毕业于山东大学物流工程专业。曾任职于微软中国、金蝶软件等知名企业。撰写了《J2EE开发全程实录》、《自己动手写开发工具》、《程序员的SQL金典》等技术图书。
</div>
</div>
</body>
</html>
<!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></title>
<script src="../Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
var offsetV = $("#inner").offset();
var positionV = $("#inner").position();
$("#div1").html("offsetV_left:" + offsetV.left + ",positionV_left:" + positionV.left + ",offsetV_top" + offsetV.top + ",positon_top:" + positionV.top);
//position是相对于外面position: relative的父元素而言的
});
</script>
</head>
<body>
<div id="outer" style="width: 200px; position: relative; left: 100px;">
外面的div
<div id="inner" style="position: absolute; left: 100px; top: 120px;">
里面的div2
</div>
</div>
<div id="div1"/>
</body>
</html>