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


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>

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

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



相关阅读:
Asp.Mvc 2.0用户服务器验证实例讲解(4)
win7系统戴尔笔记本电脑突然关机的多种原因及解决方法
Win7系统弹出Adobe Flash Player已停止工作窗口的解决方法
ext前台接收action传过来的json数据示例
Win10 Build 10151手机版曝光 视频演示过渡动画
C#获得MAC地址(网卡序列号)的实现代码
C#实现洗牌算法
ASP.NET页面间数据传递的几种方法介绍
.NET 正则表达式使用高级技巧之替换类介绍
PHP面试题之文件目录操作
ASP.NET My97DatePicker日期控件实现OA日期记事功能
C#处理Paint事件的方法
PHP中static关键字以及与self关键字的区别
ajax回调函数中使用$(this)取不到对象的解决方法
快速导航
PHP MySQL HTML CSS JavaScript MSSQL AJAX .NET JSP Linux Mac ASP 服务器 SQL jQuery C# C++ java Android IOS oracle MongoDB SQLite wamp 交通频道 作文范文 赞颂母亲的诗句 形容孤独的诗句 有关写圣诞节习俗作文:圣诞的习俗 新农村建设工作情况的小结_工作总结范文 快乐在哪作文1200字 环保卫生150字 初中初一作文500字:我运动,我快乐 我们的班主任老师__袁老师500字 综合素质评价家长评价 ☆丹露凝霜★发表日志:行走在陌生的城市 最小 现在的人怎么成了这样(二)700字 春天来啦200字 出发点 默默学习,意志坚定 两只小狮子 最小说8月经典语录_经典语录 高中高二作文900字:粉色世界(七) 2015装潢专业毕业设计开题报告书 云霄赋(转载)作文1500字 校园经济与校园经济学研究 男人你的财富是家人 计算机应用专业个人简历表 “张式理论”之“极限”理论 2010大学运动会广播稿 弘扬民族精神演讲比赛主持词 正式加入党组织后党员思想汇报_入党思想汇报 小学二年级作文:小树 五四活动方案之:合唱比赛 关于讽刺的名言 魔法种子800字 猎手的月亮 星星,蜡烛,小草作文600字 校本培训心得体会 毒品的危害作文1400字 六上第五单元作文-续写作文材料大全 免费《小石潭记 》同步练习3 童话故事 大象和老鼠 高一数学上册知识点归纳 作文 坚持就会成功 爬穆柯寨 初中初一作文650字:宁可做小小的天才 优美伤感的爱情句子 该珍惜的决不放手 汽车安全讲座 哇,她这个人 2012年商场国庆节促销活动方案 消防员的决心书_决心书 校长岗位职责 伤感短句子句句心痛 保护环境、人人有责倡议书

Copyright © 2016 phpStudy |