浅谈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 Array(数组)相关方法简述
Jul 25 Javascript
我的javascript 函数链之演变
Apr 07 Javascript
jquery事件机制扩展插件 jquery鼠标右键事件
Dec 21 Javascript
JavaScript实现获取dom中class的方法
Feb 09 Javascript
JavaScript中日期的相关操作方法总结
Oct 24 Javascript
js仿支付宝填写支付密码效果实现多方框输入密码
Mar 09 Javascript
浅谈AngularJs指令之scope属性详解
Oct 24 Javascript
如何用JS/HTML将时间戳转换为“xx天前”的形式
Feb 06 Javascript
ReactNative实现Toast的示例
Dec 31 Javascript
vue+axios新手实践实现登陆的示例代码
Jun 06 Javascript
用vue写一个日历
Nov 02 Javascript
vue-router懒加载的3种方式汇总
Feb 28 Vue.js
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
py文件转exe时包含paramiko模块出错解决方法
2016/08/12 PHP
javascript操作JSON的要领总结
2012/12/09 Javascript
JavaScript中的style.display属性操作
2013/03/27 Javascript
jQuery控制TR显示隐藏的几种方法
2014/06/18 Javascript
Backbone.js中的集合详解
2015/01/14 Javascript
微信小程序 JS动态修改样式的实现代码
2017/02/10 Javascript
jQuery使用JSONP实现跨域获取数据的三种方法详解
2017/05/04 jQuery
js微信分享实现代码
2020/10/11 Javascript
Angularjs过滤器实现动态搜索与排序功能示例
2017/12/13 Javascript
如何使用vue slot创建一个模态框的实例代码
2020/05/24 Javascript
js实现飞机大战小游戏
2020/08/26 Javascript
JavaScript逻辑运算符相关总结
2020/09/04 Javascript
windows如何把已安装的nodejs高版本降级为低版本(图文教程)
2020/12/14 NodeJs
[00:59]DOTA2荣耀之路1:Doom is back!weapon X!
2018/05/22 DOTA
Fabric 应用案例
2016/08/28 Python
python 打印直角三角形,等边三角形,菱形,正方形的代码
2017/11/21 Python
详解python string类型 bytes类型 bytearray类型
2017/12/16 Python
TensorFlow入门使用 tf.train.Saver()保存模型
2018/04/24 Python
Python使用selenium + headless chrome获取网页内容的方法示例
2019/10/16 Python
Python3.7基于hashlib和Crypto实现加签验签功能(实例代码)
2019/12/04 Python
Python request操作步骤及代码实例
2020/04/13 Python
Python爬虫requests库多种用法实例
2020/05/28 Python
英国领先的在线高尔夫商店:Scottsdale Golf
2019/08/26 全球购物
Nobody Denim官网:购买高级女士牛仔裤
2021/03/15 全球购物
外企测试工程师面试题
2015/02/01 面试题
车间工艺员岗位职责
2013/12/09 职场文书
整改报告怎么写
2014/11/06 职场文书
市场营销计划书
2015/01/17 职场文书
五年级下册复习计划
2015/01/19 职场文书
世界遗产的导游词
2015/02/13 职场文书
初中毕业生自我评价
2015/03/02 职场文书
2015财务年度工作总结范文
2015/05/04 职场文书
公务员廉洁从政心得体会
2016/01/19 职场文书
Python基础学习之奇异的GUI对话框
2021/05/27 Python
SQL中的连接查询详解
2022/06/21 SQL Server
使用CSS实现音波加载效果
2023/05/07 HTML / CSS