Jquery 中 offset() 方法
用户投稿 学习笔记 7阅读
一、语法
1、 返回偏移坐标
$(selector).offset();
top: $(selector).offset().top;
left: $(selector).offset().left;
2、设置偏移坐标：
$(selector).offset({top:value,left:value});
参数的含义：{top:value,left:value} 当设置偏移时是必需的。规定以像素为单位的 top 和 left 坐标。
可能的值：(1)、名/值对，比如 {top:100,left:100} ， (2)、一个带有 top 和 left 的对象（实例）
3、使用函数设置偏移坐标：
$(selector).offset(function(index,currentoffset));
可选。规定返回包含 top 和 left 坐标的对象的函数。 index - 返回集合中元素的 index 位置。 currentoffset - 返回被选元素的当前坐标。
二、offset 的定义和用法
offset() 方法设置或返回被选元素 相对于文档的偏移坐标
1、当用于返回偏移时：
该方法返回第一个匹配元素的偏移坐标，它返回一个带有2个属性( 以像素为单位的 top 和 left 位置)的对象
2、当用于设置偏移时：
该方法设置所有匹配元素的偏移坐标，
三、实例
<!DOCTYPE html> <html> <head> <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function(){
名/值 对 $("button").click(function(){ $("p").offset({top:200,left:200}); });
对象
$("button").click(function(){ newPos=new Object(); newPos.left="0"; newPos.top="100"; $("p").offset(newPos); });
函数
$("p").offset(function(n,c){ newPos=new Object(); newPos.left=c.left+100; newPos.top=c.top+100; return newPos; });
}); </script> </head> <body>
<p style="border:1px solid red">This is a paragraph.</p> <button>Set the offset coordinates of the p element</button>
</body> </html>
四、注意事项
offset() 方法 返回的top , left. 跟 margin-top,margin-left 也有关系。
如果元素有margin-top,margin-left. 它获取当前的margin. 没有则是默认取值。
如果父元素也有margin,broder 的话。它也会受到影响。取值要更大。 因为offset() 取的当前与文档的偏移坐标。
需要注意的是，offset的设置值，必须成对出现，否则会报错的哦！
offset不仅可以设置单个元素，也可以设置多个元素不同的坐标值，而不需要jQuery.each操作了，如：
$(".haorooms-class").offset(function(index,haorooms){ // index为元素索引 // haorooms为元素的坐标：top、left // 函数必须返回坐标值 return {top:haorooms.top+index,left:haorooms.left+index};}); demo案例解释，案例应用写代码没有案例，说不清楚，下面我举一个offset的案例，首先举一个学习的简单例子：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>-jquery.offset()使用方法总结</title></head><body><script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script><script type="text/javascript">$(document).ready(function(){var a= $("p").offset().left;alert(a); $("button").click(function(){ $("p").offset({top:100,left:0}); });});</script></head><body><p>博客便宜案例.</p><button>设置新的偏移</button></body></html>