九阁网趣 九阁网趣
PHPText.Net > 文章 > 技术 > WEB开发

jQuery获得页面元素(div、table等)页面中的相对位置(position)和绝对位置(offset)

2016/04/12 00:59
5131人阅读
新知识点吧算是,今天做一个特效需要用到位置计算,而元素的left样式属性并不好用,好在JQ提供了方法。

jQeury提供的东西真是多,今天又再次用他实现了个功能,JQ现在基本就是当作JAVASCRIPT的替代品了,太方便了。今天主要用了JQ的2个方法 position、offset


position:获取元素相对父级的坐标,但是需要CSS支持。

offset:获取元素相对窗口的坐标。


这2个方法都会返回2个属性.left和.top,分别是屏幕的X和Y坐标。


我们先来看个图片。他们都是一样的代码,展示了不同的结果。

图中A 和 B都是同样的代码。

    <div id="a1" class="a">

        <div id="a2" class="b">A<hr/><span></span></div>

    </div>

    <script type="text/javascript">

        //a2 位置

        var Y = $('#a2').offset().top;

        var X = $('#a2').offset().left;


        $('#a2').html($('#a2').html()+'页面绝对位置 X:'+X+'px Y:'+Y+'px');


        var Y = $('#a2').position().top;

        var X = $('#a2').position().left;


        $('#a2').html($('#a2').html()+'<br />父级相对位置 X:'+X+'px Y:'+Y+'px');

    </script>

    <br />

    <div id="b1" class="a">

        <div id="b2" class="b">B<hr/><span></span></div>

    </div>

    <script type="text/javascript">

        //b2 位置

        var Y = $('#b2').offset().top;

        var X = $('#b2').offset().left;


        $('#b2').html($('#b2').html()+'页面绝对位置 X:'+X+'px Y:'+Y+'px');


        var Y = $('#b2').position().top;

        var X = $('#b2').position().left;


        $('#b2').html($('#b2').html()+'<br />父级相对位置 X:'+X+'px Y:'+Y+'px');

    </script>

代码看过,基本除了ID,基本的都是一样的,但是展示出来的数据不同,这个原因就在CSS上。

    <style type="text/css">

        body{ margin:0px;padding:0px; }

        .a{ margin:10px; padding:10px; }

        .a,.b{ border:#ccc 1px solid; width:500px; height:100px; }

        #b1{ position: relative; }

    </style>

样式中高亮的部分,就是重点。其实JQ这个position也是需要CSS来支持的做判断。不过能获得相对位置和绝对位置对于某些开发场景也是方便的多。


最后附上示例代码:http://www.phptext.net/demo/jQuery/jq_posititon_offset.html

同类推荐

百度地图WEB API报错:APP Referer校验失败百度地图WEB API报错:APP Referer校验失败
微信支付 官方SDK报错 Fatal error: Uncaught exception ‘WxPayException‘ with message ‘curl出错,错误码:60‘微信支付 官方SDK报错 Fatal error: Uncaught exception ‘WxPayException‘ with message ‘curl出错,错误码:60‘
web app iphone4 iphone5 iphone6 响应式布局 适配代码web app iphone4 iphone5 iphone6 响应式布局 适配代码
关于ios/iphone/ipad 网页不能自动播放视频、音频的解决方案 mediaPlaybackRequiresUserAction  和 解决iphone/ipad视频播放单独弹出问题webkit-playsinline/allowsInlineMediaPlayback关于ios/iphone/ipad 网页不能自动播放视频、音频的解决方案 mediaPlaybackRequiresUserAction 和 解决iphone/ipad视频播放单独弹出问题webkit-playsinline/allowsInlineMediaPlayback
PHP 判断是蜘蛛(搜索引擎)来访PHP 判断是蜘蛛(搜索引擎)来访
PHP版 P2P借贷公式算法函数大全 平息/等额本金/等额本息/先息后本/混合型PHP版 P2P借贷公式算法函数大全 平息/等额本金/等额本息/先息后本/混合型
iPhone iPad HTML5网页不能自动播放AUDIO音频、VIDEO视频 原因iPhone iPad HTML5网页不能自动播放AUDIO音频、VIDEO视频 原因
jQuery获得页面元素(div、table等)页面中的相对位置(position)和绝对位置(offset)jQuery获得页面元素(div、table等)页面中的相对位置(position)和绝对位置(offset)
ECSHOP 订单状态、支付状态、配送状态 相关程序文件、变量、常量 整理说明ECSHOP 订单状态、支付状态、配送状态 相关程序文件、变量、常量 整理说明
Discuz 用户整合 免激活 同步登录 解决方法Discuz 用户整合 免激活 同步登录 解决方法