jquery.offset()使用方法总结

37000次浏览

今天是9月30号,明天就迎来国庆七天小长假了,哈哈哈~~~~提前祝大家国庆节快乐!

前几天写过一篇文章,jquery toggle()设置从上往下滑动,jquery toggle()方向,在文章的后面,介绍了一些jquery动画效果的使用方法,让大家温故而知新。今天主要讲一下jquery.offset()使用方法

jquery.offset()应用背景

很多时候需要对某个div进行定位,或者获取某个元素相对于document的位置,那么我们会用到jquery.offset()。

获得元素相对于document的位置

获得位置是元素相对于document的位置信息,通常可以说是这个元素的坐标值。

// 元素相对于document的左位移
$("#haorooms-id").offset().left
// 元素相对于document的上位移
$("#haorooms-id").offset().top

设置元素相对于document的位置

$(".haorooms").click(function(){
  x=$("p").offset();
  $("#span1").text(x.left);
  $("#span2").text(x.top);
});

这个案例是我们在点击haorooms标签的时候,在id=span1和id=span2上面显示p标签的left值和top值。

也可以用数组方式设置haorooms-id的位置,如下

// 设置元素相对于document的位移,该元素的position必须为非static值
$("#haorooms-id").offset({left:123,top:99});

注意:

需要注意的是,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>haorooms博客-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>haorooms博客便宜案例.</p>
<button>设置新的偏移</button>


</body>
</html>

上面案例中,p标签我没有写任何样式,如下图:

enter image description here

点击按钮之后,设置便宜之后,会出现一个相对的定位,如下图:

enter image description here
var a=    $("p").offset().left;
 alert(a);

是获取p标签左侧的位置!

通过这个案例,你对jquery.offset()了解了多少呢?

jquery.offset()应用

offset()应用的应用很多,你做tips定位的时候,或者弹出图层定位的时候,通常会用的到,本来想举几个案例呢,还是下次再贴上吧!大家先看看上面的解释~~~

有什么问题,可以留言交流啊!

Tags: jqueryoffset

相关文章: