jQuery中offset()方法用法实例


Posted in Javascript onJanuary 16, 2015

本文实例讲述了jQuery中offset()方法用法。分享给大家供大家参考。具体分析如下:

此方法返回或设置所匹配元素相对于document对象的偏移量。

语法结构一:

$(selector).offset()

获取匹配元素在当前document的相对偏移。
返回的对象包含两个整型属:top和left。
此方法只对可见元素有效。

实例代码:

<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

<meta name="author" content="https://3water.com/" />

<title>offset()函数-三水点靠木</title>

<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">

<meta name="author" content="https://3water.com/" />

<title>offset()函数-三水点靠木</title>

<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">

<meta name="author" content="https://3water.com/" />

<title>offset()函数-三水点靠木</title>

<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>

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

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
漂亮的jquery提示效果(仿腾讯弹出层)
Feb 05 Javascript
Jquery焦点图实例代码
Nov 25 Javascript
js显示当前日期时间和星期几
Oct 22 Javascript
原生js获取元素样式的简单方法
Aug 06 Javascript
JavaScript实现动态增删表格的方法
Mar 09 Javascript
详解Vue 事件驱动和依赖追踪
Apr 22 Javascript
动态加载权限管理模块中的Vue组件
Jan 16 Javascript
AngularJs1.x自定义指令独立作用域的函数传入参数方法
Oct 09 Javascript
VUE简单的定时器实时刷新的实现方法
Jan 20 Javascript
vue实现的树形结构加多选框示例
Feb 02 Javascript
JS控制GIF图片的停止与显示
Oct 24 Javascript
vue cli4中mockjs在dev环境和build环境的配置详情
Apr 06 Vue.js
jQuery中clone()方法用法实例
Jan 16 #Javascript
jQuery中empty()方法用法实例
Jan 16 #Javascript
jQuery中replaceAll()方法用法实例
Jan 16 #Javascript
jQuery中wrapInner()方法用法实例
Jan 16 #Javascript
jQuery中wrapAll()方法用法实例
Jan 16 #Javascript
jQuery中unwrap()方法用法实例
Jan 16 #Javascript
jquery搜索框效果实现方法
Jan 16 #Javascript
You might like
提升PHP执行速度全攻略(下)
2006/10/09 PHP
第三节--定义一个类
2006/11/16 PHP
IIS下配置Php+Mysql+zend的图文教程
2006/12/08 PHP
php 使用post,get的一种简洁方式
2010/04/25 PHP
yii框架配置默认controller和action示例
2014/04/30 PHP
javascript parseInt与Number函数的区别
2010/01/21 Javascript
jQuery知识点整理
2015/01/30 Javascript
jquery实现的3D旋转木马特效代码分享
2015/08/25 Javascript
jQuery为动态生成的select元素添加事件的方法
2016/08/29 Javascript
详解nodejs的express如何自动生成项目框架
2017/07/12 NodeJs
详解HTML5 使用video标签实现选择摄像头功能
2017/10/25 Javascript
React之PureComponent的使用作用
2018/07/10 Javascript
微信小程序用户信息encryptedData详解
2018/08/24 Javascript
基于three.js实现的3D粒子动效实例代码
2019/04/09 Javascript
如何根据业务封装自己的功能组件
2019/04/19 Javascript
Vue多环境代理配置方法思路详解
2019/06/21 Javascript
vue前后分离调起微信支付
2019/07/29 Javascript
JavaScript canvas仿代码流瀑布
2020/02/10 Javascript
vue+canvas实现拼图小游戏
2020/09/18 Javascript
Node.js fs模块原理及常见用途
2020/10/22 Javascript
使用webpack5从0到1搭建一个react项目的实现步骤
2020/12/16 Javascript
编写Python脚本使得web页面上的代码高亮显示
2015/04/24 Python
python脚本监控docker容器
2016/04/27 Python
Python用csv写入文件_消除空余行的方法
2018/07/06 Python
tensorflow实现加载mnist数据集
2018/09/08 Python
Python3中的最大整数和最大浮点数实例
2019/07/09 Python
python中的列表与元组的使用
2019/08/08 Python
python基于TCP实现的文件下载器功能案例
2019/12/10 Python
深入理解Python变量的数据类型和存储
2021/02/01 Python
Python  Asyncio模块实现的生产消费者模型的方法
2021/03/01 Python
意大利拉斐尔时尚购物网:Raffaello Network(支持中文)
2018/11/09 全球购物
酒店管理专业学生求职信
2013/09/27 职场文书
会计专业求职信范文
2014/03/16 职场文书
《小动物过冬》教学反思
2014/04/17 职场文书
正规借条模板
2015/05/26 职场文书
2016年学校安全教育月活动总结
2016/04/06 职场文书