深度理解Jquery 中 offset() 方法
来源:互联网 发布:免费外汇交易软件 编辑:程序博客网 时间:2024/06/05 08:21
一、语法
1、 返回偏移坐标
$(selector).offset();
top: $(selector).offset().top;
left: $(selector).offset().left;
2、设置偏移坐标:
$(selector).offset({top:value,left:value});
参数的含义:{top:value,left:value} 当设置偏移时是必需的。规定以像素为单位的 top 和 left 坐标。
可能的值:(1)、名/值对,比如 {top:100,left:100} , (2)、一个带有 top 和 left 的对象(实例)
3、使用函数设置偏移坐标:
$(selector).offset(function(index,currentoffset));
可选。规定返回包含 top 和 left 坐标的对象的函数。
index - 返回集合中元素的 index 位置。
currentoffset - 返回被选元素的当前坐标。
二、offset 的定义和用法
offset() 方法设置或返回被选元素 相对于文档的偏移坐标
1、当用于返回偏移时:
该方法返回第一个匹配元素的偏移坐标,它返回一个带有2个属性( 以像素为单位的 top 和 left 位置)的对象
2、当用于设置偏移时:
该方法设置所有匹配元素的偏移坐标,
三、实例
<!DOCTYPE html>
<html>
<head>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
名/值 对
$("button").click(function(){
$("p").offset({top:200,left:200});
});
对象
$("button").click(function(){
newPos=new Object();
newPos.left="0";
newPos.top="100";
$("p").offset(newPos);
});
函数
$("p").offset(function(n,c){
newPos=new Object();
newPos.left=c.left+100;
newPos.top=c.top+100;
return newPos;
});
});
</script>
</head>
<body>
<p style="border:1px solid red">This is a paragraph.</p>
<button>Set the offset coordinates of the p element</button>
</body>
</html>
四、注意事项
offset() 方法 返回的top , left. 跟 margin-top,margin-left 也有关系。
如果元素有margin-top,margin-left. 它获取当前的margin. 没有则是默认取值。
如果父元素也有margin,broder 的话。它也会受到影响。取值要更大。 因为offset() 取的当前与文档的偏移坐标。
- 深度理解Jquery 中 offset() 方法
- 深度理解Jquery 中 offset() 方法
- Jquery 中 offset() 方法
- 深度理解Jquery 中 scrollTop() 方法
- jQuery中offset和position方法
- jquery对象的position和offset方法理解
- jQuery中position()方法和offset()方法的区别
- jQuery CSS 操作 - offset() 方法
- Jquery offset方法 位置bug
- Jquery中offset()使用注意事项
- Jquery中的offset()和position()方法详解
- jQuery方法position()与offset()区别
- jQuery源码分析之offset,position,offsetParent方法以及源码中常见的cssHooks,swap代码
- 涉及到滚动条的定位问题,主要是Jquery 中 offset() 方法
- 数据库中LIMIT和 OFFSET的理解
- jquery offset
- jquery offset
- JQuery中pageX與offset().top區別
- HDU 5955 Guessing the Dice Roll AC自动机 高斯消元
- 一个输入框限定最多输入两位小数
- 1039. Course List for Student (25)
- 图片预加载的方法
- vb.net 教程 12-3 HtmlElement类 3
- 深度理解Jquery 中 offset() 方法
- 【程序】Marvell 88W8782/88W8801 WiFi模块的固件下载代码
- Swift4之NSAttributedString的使用
- Python初入门(四)(Head First Python 第四章 数据保存到文件)
- 11:图像旋转
- 方法重写和方法重载
- Linux shell工作原理详细分析
- 在Pypi上发布自己的Python包
- 4.HTML表格