浅谈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 相关文章推荐
JQuery之拖拽插件实现代码
Apr 14 Javascript
js判断一个字符串是否包含一个子串的方法
Jan 26 Javascript
jQuery禁用快捷键例如禁用F5刷新 禁用右键菜单等的简单实现
Aug 31 Javascript
微信小程序 label 组件详解及简单实例
Jan 10 Javascript
详解JS中的立即执行函数
Feb 24 Javascript
原生JS实现不断变化的标签
May 22 Javascript
详解JS构造函数中this和return
Sep 16 Javascript
vue.js或js实现中文A-Z排序的方法
Mar 08 Javascript
JS实现的集合去重,交集,并集,差集功能示例
Mar 13 Javascript
Angularjs实现数组随机排序的方法
Oct 02 Javascript
微信小程序动态显示项目倒计时
Jun 20 Javascript
微信小程序激励式视频广告组件使用详解
Dec 06 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
模仿OSO的论坛(二)
2006/10/09 PHP
php实现用于验证所有类型的信用卡类
2015/03/24 PHP
PHP安装memcached扩展笔记
2015/05/28 PHP
用PHP去掉文件头的Unicode签名(BOM)方法
2017/06/22 PHP
PHP设计模式之工厂方法设计模式实例分析
2018/04/25 PHP
php实现在线考试系统【附源码】
2018/09/18 PHP
一些易混淆且不常用的属性,希望有用
2007/01/29 Javascript
动态调用CSS文件的JS代码
2010/07/29 Javascript
向左滚动文字 js代码效果
2013/08/17 Javascript
jquery实现非叠加式的搜索框提示效果
2014/01/07 Javascript
JavaScript闭包函数访问外部变量的方法
2014/08/27 Javascript
JS实现的仿东京商城菜单、仿Win右键菜单及仿淘宝TAB特效合集
2015/09/28 Javascript
js动态获取子复选项并设计全选及提交的实现方法
2016/06/24 Javascript
全面了解javascript三元运算符
2016/06/27 Javascript
浅谈js中startsWith 函数不能在任何浏览器兼容的问题
2017/03/01 Javascript
深入理解JavaScript 参数按值传递
2017/05/24 Javascript
react 父组件与子组件之间的值传递的方法
2017/09/14 Javascript
vue生成token保存在客户端localStorage中的方法
2017/10/25 Javascript
老生常谈JS中的继承及实现代码
2018/07/06 Javascript
[03:06]V社市场总监Dota2项目负责人Erik专访:希望更多中国玩家加入DOTA2
2014/07/11 DOTA
python将多个文本文件合并为一个文本的代码(便于搜索)
2011/03/13 Python
python实现随机密码字典生成器示例
2014/04/09 Python
python实现自动更换ip的方法
2015/05/05 Python
在Mac OS上使用mod_wsgi连接Python与Apache服务器
2015/12/24 Python
对Python中一维向量和一维向量转置相乘的方法详解
2019/08/26 Python
解决Python图形界面中设置尺寸的问题
2020/03/05 Python
python实现图像全景拼接
2020/03/27 Python
Python中实现输入一个整数的案例
2020/05/03 Python
印尼极简主义和实惠的在线家具店:Fabelio
2019/03/27 全球购物
以思科路由器为例你写下单臂路由的配置命令
2013/08/03 面试题
乡镇党员干部群众路线对照检查材料思想汇报
2014/09/28 职场文书
医院领导班子查摆问题对照检查材料思想汇报
2014/10/08 职场文书
经理岗位职责范本
2015/04/15 职场文书
创业计划之特色精品店
2019/08/12 职场文书
SQLServer2019 数据库环境搭建与使用的实现
2021/04/08 SQL Server
使用Django框架创建项目
2022/06/10 Python