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 相关文章推荐
js实现右下角可关闭最小化div(可用于展示推荐内容)
Jun 24 Javascript
JavaScript检测浏览器cookie是否已经启动的方法
Feb 27 Javascript
js实现绿白相间竖向网页百叶窗动画切换效果
Mar 02 Javascript
js实现网页收藏功能
Dec 17 Javascript
Bootstrap开关(switch)控件学习笔记分享
May 30 Javascript
BootStrap智能表单demo示例详解
Jun 13 Javascript
javascript函数的四种调用模式
Jan 08 Javascript
bootstrap confirmation按钮提示组件使用详解
Aug 22 Javascript
js正则表达式校验指定字符串的方法
Jul 23 Javascript
详解使用jest对vue项目进行单元测试
Sep 07 Javascript
vue表单中遍历表单操作按钮的显示隐藏示例
Oct 30 Javascript
微信小程序用户登录和登录态维护的实现
Dec 10 Javascript
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调用三种数据库的方法(3)
2006/10/09 PHP
PHP面向对象三大特点学习(充分理解抽象、封装、继承、多态)
2012/05/07 PHP
PHP连接sql server 2005环境配置及问题解决
2014/08/08 PHP
javascript this用法小结
2008/12/19 Javascript
JavaScript constructor和instanceof,JSOO中的一对欢喜冤家
2009/05/25 Javascript
JavaScript限定复选框的选择个数示例代码
2013/08/25 Javascript
struts2+jquery组合验证注册用户是否存在
2014/04/30 Javascript
Javscript调用iframe框架页面中函数的方法
2014/11/01 Javascript
浅谈jQuery中height与width
2015/07/06 Javascript
深入理解Javascript中的自执行匿名函数
2016/06/03 Javascript
JavaScript中的await/async的作用和用法
2016/10/31 Javascript
Javascrip实现文字跳动特效
2016/11/27 Javascript
使用Node.js实现RESTful API的示例
2017/08/01 Javascript
详解基于vue-cli优化的webpack配置
2017/11/06 Javascript
微信小程序switch开关选择器使用详解
2018/01/31 Javascript
VSCode中如何利用d.ts文件进行js智能提示
2018/04/13 Javascript
详解node Async/Await 更好的异步编程解决方案
2018/05/10 Javascript
JavaScript中filter的用法实例分析
2019/02/27 Javascript
微信小程序前端promise封装代码实例
2019/08/24 Javascript
Vue实现点击按钮复制文本内容的例子
2019/11/09 Javascript
js中关于Blob对象的介绍与使用
2019/11/29 Javascript
javascript this指向相关问题及改变方法
2020/11/19 Javascript
[01:58]2018DOTA2亚洲邀请赛趣味视频——交流
2018/04/03 DOTA
Windows系统下使用flup搭建Nginx和Python环境的方法
2015/12/25 Python
TensorFlow搭建神经网络最佳实践
2018/03/09 Python
TensorFlow Session会话控制&amp;Variable变量详解
2018/07/30 Python
python scatter散点图用循环分类法加图例
2019/03/19 Python
Python爬虫使用代理IP的实现
2019/10/27 Python
美国非常受欢迎的Spa品牌:Bliss必列斯
2018/04/10 全球购物
SmartBuyGlasses德国:购买太阳镜和眼镜
2019/08/20 全球购物
自我介绍演讲稿
2014/01/15 职场文书
销售主管岗位职责范本
2014/02/14 职场文书
2014个人四风对照检查材料思想汇报
2014/09/18 职场文书
考教师资格证不要错过的4个最佳时机
2019/07/17 职场文书
Matlab如何实现矩阵复制扩充
2021/06/02 Python
spring boot中nativeQuery的用法
2021/07/26 Java/Android