浅谈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 实现的点击复制代码
Mar 24 Javascript
经典海量jQuery插件 大家可以收藏一下
Feb 07 Javascript
EasySlider 基于jQuery功能强大简单易用的滑动门插件
Jun 11 Javascript
Jquery事件的连接使用示例
Jun 18 Javascript
jQuery选择器源码解读(七):elementMatcher函数
Mar 31 Javascript
JavaScript实现cookie的写入、读取、删除功能
Nov 05 Javascript
angular ngClick阻止冒泡使用默认行为的方法
Nov 03 Javascript
详解支持Angular 2的表格控件
Jan 19 Javascript
前端构建工具之gulp的配置与搭建详解
Jun 12 Javascript
解决vue 打包发布去#和页面空白的问题
Sep 04 Javascript
angularJs select绑定的model取不到值的解决方法
Oct 08 Javascript
JS使用canvas中的measureText方法测量字体宽度示例
Feb 02 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中Snoopy类用法实例
2015/06/19 PHP
修改PHP脚本使WordPress拦截垃圾评论的方法示例
2015/12/10 PHP
ThinkPHP+EasyUI之ComboTree中的会计科目树形菜单实现方法
2017/06/09 PHP
深入理解Yii2.0乐观锁与悲观锁的原理与使用
2017/07/26 PHP
PHP使用zlib扩展实现GZIP压缩输出的方法详解
2018/04/09 PHP
PHP的imageTtfText()函数深入详解
2021/03/03 PHP
用jquery设置按钮的disabled属性的实现代码
2010/11/28 Javascript
javascript实现div浮动在网页最顶上并带关闭按钮效果实例
2013/08/13 Javascript
JavaScript获取文本框内选中文本的方法
2015/02/20 Javascript
创建一个类Person的简单实例
2016/05/17 Javascript
Nodejs多站点切换Htpps协议详解及简单实例
2017/02/23 NodeJs
vue 微信授权登录解决方案
2018/04/10 Javascript
解决iview多表头动态更改列元素发生的错误的方法
2018/11/02 Javascript
关于JSON解析的实现过程解析
2019/10/08 Javascript
原生JavaScript实现轮播图
2021/01/10 Javascript
Python去除列表中重复元素的方法
2015/03/20 Python
使用Python下载歌词并嵌入歌曲文件中的实现代码
2015/11/13 Python
Flask框架使用DBUtils模块连接数据库操作示例
2018/07/20 Python
python高效过滤出文件夹下指定文件名结尾的文件实例
2018/10/21 Python
对python数据切割归并算法的实例讲解
2018/12/12 Python
详解Django中CBV(Class Base Views)模型源码分析
2019/02/25 Python
python 应用之Pycharm 新建模板默认添加编码格式-作者-时间等信息【推荐】
2019/06/17 Python
django 快速启动数据库客户端程序的方法示例
2019/08/16 Python
python如何处理程序无法打开
2020/06/16 Python
欧舒丹美国官网:L’Occitane美国
2018/02/23 全球购物
介绍一下HTTP、HTTPS和SSL
2012/12/16 面试题
最新的大学生找工作自我评价
2013/09/29 职场文书
幼儿园教师工作制度
2014/01/22 职场文书
陈欧广告词
2014/03/14 职场文书
银行贷款承诺书
2014/03/29 职场文书
保护环境建议书300字
2014/05/13 职场文书
五好家庭申报材料
2014/12/20 职场文书
2016年小学生清明节广播稿
2015/12/17 职场文书
小学教师暑期培训心得体会
2016/01/09 职场文书
vue中使用mockjs配置和使用方式
2022/04/06 Vue.js
JavaScript parseInt0.0000005打印5原理解析
2022/07/23 Javascript