浅谈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 相关文章推荐
Prototype使用指南之string.js
Jan 10 Javascript
javascript 同时在IE和FireFox获取KeyCode的代码
Feb 07 Javascript
js下获得客户端操作系统的函数代码(1:vista,2:windows7,3:2000,4:xp,5:2003,6:2008)
Oct 31 Javascript
Jquery命名冲突解决的五种方案分享
Mar 16 Javascript
jquery事件重复绑定的快速解决方法
Jan 03 Javascript
jQuery实现单击按钮遮罩弹出对话框(仿天猫的删除对话框)
Apr 10 Javascript
javascript去除字符串左右两端的空格
Feb 05 Javascript
javascript实现链接单选效果的方法
May 13 Javascript
jquery判断复选框是否被选中的方法
Oct 16 Javascript
jQuery插件HighCharts实现气泡图效果示例【附demo源码】
Mar 13 Javascript
js实现字符全排列算法的简单方法
May 01 Javascript
javascript自定义日期比较函数用法示例
Jul 22 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
特殊字符、常规符号及其代码对照表
2006/06/26 Javascript
js实现的真正的iframe高度自适应(兼容IE,FF,Opera)
2010/03/07 Javascript
jQuery 1.5.1 发布,全面支持IE9 修复大量bug
2011/02/26 Javascript
jquery入门—访问DOM对象方法
2013/01/07 Javascript
巧方法 JavaScript获取超链接的绝对URL地址
2016/06/14 Javascript
jQuery无刷新上传之uploadify3.1简单使用
2016/06/18 Javascript
jQuery简单实现iframe的高度根据页面内容自适应的方法
2016/08/01 Javascript
JavaScript运动框架 解决速度正负取整问题(一)
2017/05/17 Javascript
angularjs定时任务的设置与清除示例
2017/06/02 Javascript
BootStrap 标题设置跨行无效的解决方法
2017/10/25 Javascript
在 Node.js 中使用 async 函数的方法
2017/11/17 Javascript
微信小程序和H5页面间相互跳转代码实例
2019/09/19 Javascript
使用webpack搭建vue环境的教程详解
2019/12/31 Javascript
html-webpack-plugin修改页面的title的方法
2020/06/18 Javascript
vue 获取url参数、get参数返回数组的操作
2020/11/12 Javascript
[01:32]TI奖金增速竟因它再创新高!DOTA2勇士令状不朽珍藏Ⅰ饰品欣赏
2018/05/18 DOTA
详解Python3.1版本带来的核心变化
2015/04/07 Python
python中pandas.DataFrame对行与列求和及添加新行与列示例
2017/03/12 Python
Golang与python线程详解及简单实例
2017/04/27 Python
简单了解Python3里的一些新特性
2019/07/13 Python
Python利用requests模块下载图片实例代码
2019/08/12 Python
tensorflow 固定部分参数训练,只训练部分参数的实例
2020/01/20 Python
keras实现theano和tensorflow训练的模型相互转换
2020/06/19 Python
python批量检查两个对应的txt文件的行数是否一致的实例代码
2020/10/31 Python
HTML5 history新特性pushState、replaceState及两者的区别
2015/12/26 HTML / CSS
Html5饼图绘制实现统计图的方法
2020/08/05 HTML / CSS
高中体育教学反思
2014/01/24 职场文书
外贸员简历中的自我评价
2014/03/04 职场文书
正风肃纪剖析材料
2014/09/30 职场文书
2014年绿化工作总结
2014/12/09 职场文书
优秀班主任材料
2014/12/16 职场文书
就业意向协议书
2015/01/29 职场文书
医药公司采购员岗位职责
2015/04/03 职场文书
2015年社区工会工作总结
2015/05/26 职场文书
2015党建工作简报
2015/07/21 职场文书
最美劳动诗,致敬所有的劳动者!
2019/07/12 职场文书