jquery.offset()使用方法总结
今天是9月30号，明天就迎来国庆七天小长假了，哈哈哈~~~~提前祝大家国庆节快乐！
前几天写过一篇文章，jquery toggle()设置从上往下滑动，jquery toggle()方向，在文章的后面，介绍了一些jquery动画效果的使用方法，让大家温故而知新。今天主要讲一下jquery.offset()使用方法。
jquery.offset()应用背景
很多时候需要对某个div进行定位，或者获取某个元素相对于document的位置，那么我们会用到jquery.offset()。
获得元素相对于document的位置
获得位置是元素相对于document的位置信息，通常可以说是这个元素的坐标值。
// 元素相对于document的左位移
$("#炫H5-id").offset().left
// 元素相对于document的上位移
$("#炫H5-id").offset().top设置元素相对于document的位置
$(".炫H5").click(function(){
x=$("p").offset();
$("#span1").text(x.left);
$("#span2").text(x.top);
});这个案例是我们在点击炫H5标签的时候，在id=span1和id=span2上面显示p标签的left值和top值。
也可以用数组方式设置炫H5-id的位置，如下
// 设置元素相对于document的位移，该元素的position必须为非static值
$("#炫H5-id").offset({left:123,top:99});注意：
需要注意的是，offset的设置值，必须成对出现，否则会报错的哦！
offset不仅可以设置单个元素，也可以设置多个元素不同的坐标值，而不需要jQuery.each操作了，如：
$(".炫H5-class").offset(function(index,炫H5)
{
// index为元素索引
// 炫H5为元素的坐标：top、left
// 函数必须返回坐标值
return {top:炫H5.top+index,left:炫H5.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>炫H5博客-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>炫H5博客便宜案例.</p>
<button>设置新的偏移</button>
</body>
</html>上面案例中，p标签我没有写任何样式，如下图：
点击按钮之后，设置便宜之后，会出现一个相对的定位，如下图：
var a= $("p").offset().left;
alert(a);是获取p标签左侧的位置！
通过这个案例，你对jquery.offset()了解了多少呢？
jquery.offset()应用
offset()应用的应用很多，你做tips定位的时候，或者弹出图层定位的时候，通常会用的到，本来想举几个案例呢，还是下次再贴上吧！大家先看看上面的解释~~~
有什么问题，可以留言交流啊！