浅谈jQuery的offset()方法及示例分享


Posted in Javascript onJuly 17, 2015

offset()方法的定义和用法:

此方法返回或设置所匹配元素相对于document对象的偏移量。

语法结构一:

$(selector).offset()
获取匹配元素在当前document的相对偏移。
返回的对象包含两个整型属:top和left。
此方法只对可见元素有效。
实例代码:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">

<style type="text/css">
*{
 margin:0px;
 padding:0px;
}
.father{
 border:1px solid black;
 width:400px;
 height:300px;
 padding:10px;
 margin:50px;
}
.children{
 height:150px;
 width:200px;
 margin-left:50px;
 background-color:green;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 $("button").click(function(){
   a=$(".children").offset();
   alert("元素的偏移量坐标是:"+a.top+"|"+a.left+"");
  })
})
</script>
</head>
<body>
<div class="father">
 <div class="children"></div>
</div>
<button>获取元素的坐标</button>
</body>
</html>

以上代码可以弹出子div相对于document的偏移量。

语法结构二:

$(selector).offset(value)

设置匹配元素相对于document对象的坐标。
offset()方法可以让我们重新设置元素的位置。这个元素的位置是相对于document对象的。
如果对象原先的position样式属性是static的话,会被改成relative来实现重定位。
参数列表:

参数 描述
value 规定以像素计的 top 和 left 坐标。

可能的值:

1.值对,比如 {top:200,left:10}。
2.带有top和left 属性的对象。

实例代码:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">

<style type="text/css">
.father{
 border:1px solid black;
 width:400px;
 height:300px;
}
.children{
 height:150px;
 width:200px;
 background-color:green;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 $("button").click(function(){
  $(".children").offset({top:100,left:100})
 })
})
</script>
</head>
<body>
<div class="father">
 <div class="children"></div>
</div>
<button>点击设置偏移量</button>
</body>
</html>

以上代码可以设置div相对于document的偏移量。

语法结构三:

使用函数的返回值来设置偏移坐标:

$(selector).offset(function(index,oldoffset))
参数列表:

参数 描述
function(index,oldvalue) 规定返回被选元素新偏移坐标的函数:
index - 可选。元素的索引。
oldvalue - 可选。当前坐标。

实例代码:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<style type="text/css">
.father{
 border:1px solid black;
 width:400px;
 height:300px;
}
.children{
 height:150px;
 width:200px;
 background-color:green;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 $("button").click(function(){
  $(".children").offset(function(a,b){
   var newpoint= new Object();
   newpoint.top=b.top+50;
   newpoint.left=b.left+50;
   return newpoint;
  })
 })
})
</script>
</head>
<body>
<div class="father">
 <div class="children"></div>
</div>
<button>点击设置偏移量</button>
</body>
</html>

以上代码同样可以设置元素的偏移,不过值是通过函数返回。

以上所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
javascript 支持ie和firefox杰奇翻页函数
Jul 22 Javascript
浅谈js的setInterval事件
Dec 05 Javascript
javascript实现在下拉列表中显示多级树形菜单的方法
Aug 12 Javascript
再谈javascript常见错误及解决方法
Sep 16 Javascript
jQuery webuploader分片上传大文件
Nov 07 Javascript
javascript动画系列之模拟滚动条
Dec 13 Javascript
JavaScript获取短信验证码(周期性)
Dec 29 Javascript
微信小程序开发之Tabbar实例详解
Jan 09 Javascript
利用Jasmine对Angular进行单元测试的方法详解
Jun 12 Javascript
微信JSAPI Ticket接口签名详解
Jun 28 Javascript
node.js的exports、module.exports与ES6的export、export default深入详解
Oct 26 Javascript
vue中在vuex的actions中请求数据实例
Nov 08 Javascript
JavaScript用select实现日期控件
Jul 17 #Javascript
纯javascript制作日历控件
Jul 17 #Javascript
javascript生成不重复的随机数
Jul 17 #Javascript
jQuery实现径向动画菜单效果
Jul 17 #Javascript
jquery合并表格中相同文本的相邻单元格
Jul 17 #Javascript
用svg制作富有动态的tooltip
Jul 17 #Javascript
jquery实现根据浏览器窗口大小自动缩放图片的方法
Jul 17 #Javascript
You might like
Php Cookie的一个使用注意点
2008/11/08 PHP
php常量详细解析
2015/10/27 PHP
浅谈PHP eval()函数定义和用法
2016/06/21 PHP
PHP实现超简单的SSL加密解密、验证及签名的方法示例
2017/08/28 PHP
PHP实现数据库的增删查改功能及完整代码
2018/04/18 PHP
Laravel如何创建服务器提供者实例代码
2019/04/15 PHP
TP5.0框架实现无限极回复功能的方法分析
2019/05/04 PHP
浅析PHP中的 inet_pton 网络函数
2019/12/16 PHP
云网广告中的代码,提示出错,大家找找
2006/11/21 Javascript
Open and Print a Word Document
2007/06/15 Javascript
prototype Element学习笔记(篇一)
2008/10/26 Javascript
另一个javascript小测验(代码集合)
2011/07/27 Javascript
调试Javascript代码(浏览器F12及VS中debugger关键字)
2013/01/25 Javascript
jquery动态添加元素事件失效问题解决方法
2014/05/23 Javascript
详解基于Bootstrap扁平化的后台框架Ace
2015/11/27 Javascript
利用VUE框架,实现列表分页功能示例代码
2017/01/12 Javascript
Javascript中document.referrer隐藏来源的方法
2017/01/16 Javascript
ionic 自定义弹框效果
2017/06/27 Javascript
JS页面获取 session 值,作用域和闭包学习笔记
2019/10/16 Javascript
让python同时兼容python2和python3的8个技巧分享
2014/07/11 Python
python中文乱码不着急,先看懂字节和字符
2017/12/20 Python
如何实现删除numpy.array中的行或列
2018/05/08 Python
python通过paramiko复制远程文件及文件目录到本地
2019/04/30 Python
利用python求积分的实例
2019/07/03 Python
python basemap 画出经纬度并标定的实例
2019/07/09 Python
python创建子类的方法分析
2019/11/28 Python
Python中sys模块功能与用法实例详解
2020/02/26 Python
Python变量格式化输出实现原理解析
2020/08/06 Python
html5教程画矩形代码分享
2013/12/04 HTML / CSS
Trip.com香港网站:Ctrip携程旗下,全球最大的网上旅游社之一
2016/08/01 全球购物
《寓言两则》教学反思
2014/02/27 职场文书
财务务虚会发言材料
2014/10/20 职场文书
2015年安全生产责任书
2015/01/30 职场文书
用Python提取PDF表格的方法
2021/04/11 Python
深入理解CSS 中 transform matrix矩阵变换问题
2021/08/30 HTML / CSS
【海涛解说】pis亲自推荐,其实你从来不会玩NW
2022/04/01 DOTA