jQuery--offset()方法

定义

offset() 方法返回或设置匹配元素相对于文档的偏移（位置）。

用法一 返回偏移坐标

返回第一个匹配元素的偏移坐标。

该方法返回的对象包含两个整型属性：top 和 left，以像素计。此方法只对可见元素有效。

语法：

$(selector).offset()

范例：

<script type="text/javascript">
$(function(){
	$("button").click(function(){
	  var obj =$("p").offset();
	  $("#span1").text(obj.left);
	  $("#span2").text(obj.top);
	});
});
</script>

<p>本段落的偏移是 <span id="span1">unknown</span> left 和 <span id="span2">unknown</span> top。</p>
<button>获得 offset</button>

用法二 设置偏移坐标

设置所有匹配元素的偏移坐标。

语法：

$(selector).offset(value)

参数	描述
value	必需。规定规定以像素计的 top 和 left 坐标。 可能的值： 1、键值对，比如{top:100,left:0} 2、带有top和left属性的对象

<script type="text/javascript">
$(function(){
	$("button").click(function(){
    $("p").offset({top:100,left:100});
	})
})
</script>

<p>This is a paragraph.</p>
<button>设置新的偏移</button>

点击后

用法三 使用函数来设置偏移坐标

使用函数来设置所有匹配元素的偏移坐标。

语法：

$(selector).offset(function(index,oldoffset))

参数	描述
function(index,oldoffset)	规定返回被选中元素新偏移坐标的函数 1、index【可选】接收选择器的index位置 2、oldvalue【可选】接收选择器的当前坐标（旧坐标）

$(function(){
  $("button").click(function(){
    $("p").offset(function(n,c){
    	newPos=new Object();
        newPos.left=c.left+100;
        newPos.top=c.top+100;
        console.log(n);
        return newPos;
    });
  });
});

<p>这是一个段落。</p>
<button>设置 p 元素的 offset 坐标</button>

点一次

再点

---

实例

鼠标移动时，获取鼠标在div内的相对坐标

$(function(){
  $("div").on("mousemove",function(){
     var x = parseInt(event.pageX-$(this).offset().left);
     var y = parseInt(event.pageY-$(this).offset().top);
     $(this).html("鼠标位置:"+x+","+y);
  })
})

在div上移动鼠标