在需要的位置，弹出Div层；jquery获取对象坐标|

最新推荐文章于 2023-06-27 15:06:03 发布

wangsen2235068

最新推荐文章于 2023-06-27 15:06:03 发布

阅读量1.4w

点赞数

分类专栏： Jquery ASP.NET 文章标签： div jquery function xhtml 开发工具 html

本文链接：https://blog.csdn.net/wangsen2235068/article/details/6663452

版权

ASP.NET 同时被 2 个专栏收录

28 篇文章 0 订阅

订阅专栏

Jquery

5 篇文章 0 订阅

订阅专栏

获取页面某一元素的绝对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;

<!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>

wangsen2235068

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
在需要的位置，弹出Div层；jquery获取对象坐标|

获取页面某一元素的绝对X,Y坐标，可以用offset()方法：var X = $('#DivID').offset().top;var Y = $('#DivID').offset().left;获取相对(父元素)位置，用position().父元素的position必须是relativevar X = $('#DivID').position().top;var Y =
复制链接

扫一扫