【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在不同的浏览器中指代什么元素。因此，我们可以不考虑浏览器兼容性问题，通过迭代方法计算当前元素距离窗口左上角的距离。

 

相对偏移

所谓相对偏移位置就是指定元素距离最近父级定位元素左上角的偏移距离。这里读者首先需要弄明白以下两个概念。

第一、  定位元素就是被定义了相对绝对或固定定位的元素，即设置了css的postion属性值为absolute、fixed和relative属性值的元素

第二、  所谓父元素是指与当前元素相邻的上一级元素，而最近的父级元素不一定是与当前元素相邻，也可能距离很远。如果当前元素的上级元素position属性值都没有被定义为absolute、fixed或relative，则当前元素的最近父级定位元素就应该是body元素了，此时相对偏移位置与绝对偏移位置是相同的。

 

jQuery实现

jQuery定义了position()方法，使用该方法可以获取匹配元素的相对偏移位置。该方法的用法与offset()方法相同，都返回一个包含两个属性（即top和left）的对象。注意，为精确计算结果，请在补白、边框和填充属性上使用像素单位，该方法只对可见元素有效。

javascript实现

我们继续以上面的示例为基础，演示如何直接使用javascript获取元素的相对偏移位置，并使用javascript自定义offset()方法。

   DOMExtend(“position”,function(){

       var _this = this;

       if(_this.parentNode == _this.offsetParent){

            //如果父元素就是定位元素

             var px = parseInt(getStyle(_this.parentNode,”borderLeftWidth”))|| 0;

             //获取父元素的左侧边框宽度

             var py = parentInt(getStyle(_this.parentNode,”borderTopWidth))||0;

               var x = _this.offsetLeft – px;

               var y = _this.offsetTop – py;

        }else{

              var o = offset(_this);

              var p = offset(_this.offsetParent);

              var x = o.left –p.left;

              var y = o.top – p.top;

        }

           return {

              “left”:x,

              “top”:y

           };

            function offset(_this){

                 var left = 0,top=0;

                 while(_this.offsetParent){

                     left+=_this.offsetLeft;

                     top+=_this.offsetTop;

                     _this =_this.offsetParent;

                  }

                  return {

                       “left”:left,

                       “top”:top

                  }

            }

            function getStyle(e,n){

                 if(e.style[n]){

                      return e.style[n];

                 }else if(e.currentStyle){

                        //IE浏览器

                       returne.currentStyle[n];

                 }else if(document.defaultView&& document.defaultView.getComputeStyle){

                      n=n.replace(/([A-Z])/g,”-$1”);

                      n = n.toLowerCase();

                      var s =document.defaultView.getComputeStyle(e,null);

                      if(s) returns.getPropertyValue(n);

                  }else

                     return null;

            }

   })