【jQuery学习笔记-----绝对偏移位置】

绝对偏移位置

所谓绝对偏移位置就是指定元素距离浏览器窗口左上角的偏移距离。（回忆js学习时的窗口坐标和文档坐标）。

jQuery实现

jQuery定义了offset()方法，该方法能够获取匹配元素在当前窗口的相对偏移。该方法没有参数，返回值对象，包含两个属性：top和left属性，分别存储匹配元素的顶部偏移和左侧偏移。注意，该方法仅对可见可见元素有效。

javascript实现

DOMExtned(“offset”,function(){

        var _this = this;

         var left = 0,top=0;

         while(_this.offsetParent){

              left+=_this.offsetLeft;

             top+=_this.offsetTop;

               _this=_this.offsetParent; //迭代计算

          }

          return {

                “left”:left,

                “top”:top

          }

})

 

在上例中，读者需要明白元素的相对偏移问题。DOM约定任何元素都拥有offsetLeft和offsetTop属性，它们描述了元素的最近偏移位置。

但是不同浏览器定义元素的偏移参照对象不同。例如，IE总是以父元素为参照对象进行偏移，而非IE浏览器会以最近非静态定位元素为参照对象进行偏移。

尽管元素偏移定位存在兼容问题，但是所有浏览器都支持offsetParent属性，由于offsetParent属性总能够自动识别当前元素偏移的参照对象，所以不用担心offsetParent在不同的浏览器中指代什么元素。因此，我们可以不考虑浏览器兼容性问题，通过迭代方法计算当前元素距离窗口左上角的距离。