必要な場所でDivレイヤをポップアップします.jqueryオブジェクト座標の取得|
4821 ワード
ページのある要素の絶対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
onmousemove="showDetail(event)" onmouseout="hide();"> (js )</a> <span onmouseout="hide();"
id="spanShow" style="color: Red"> (Jquery )</span>
<div id="details" style="display: none; width: 140px;" onmouseover="this.style.display=''"
onmouseout="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>