`
huibin
  • 浏览: 755126 次
  • 性别: Icon_minigender_1
  • 来自: 郑州
社区版块
存档分类
最新评论

JQuery获得绝对,相对位置的坐标方法

 
阅读更多

获取页面某一元素的绝对X,Y坐标，可以用offset()方法：（body属性设置margin :0;padding:0;）
var X = $('#DivID').offset().top;
var Y = $('#DivID').offset().left;
获取相对(父元素)位置:
var X = $('#DivID').position().top;
var Y = $('#DivID').position().left;


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>java Test</title>
</head>
<style type="text/css">
<!--
body,div { margin:0; padding:0;}
-->
</style>
<script type="text/javascript" src="js/jquery.js"></script>

<body>
<div style="background:#ccc;height:300px;" onclick=""></div>
<div style="position:relative;">
<div style=" position:absolute;left:50px; top:50px;" id="DivID"></div>
</div>
<script type="text/javascript">
var X = $('#DivID').offset().top;
var Y = $('#DivID').offset().left;
document.write(X+"<br />");
document.write(Y+"<br />");
//获取相对(父元素)位置:
var C = $('#DivID').position().top;
var D = $('#DivID').position().left;
document.write(C+"<br />");
document.write(D);
</script>
</body>
</html>

分享到：
| [转]给网站上传的图片盖章
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    JQuery 获得绝对,相对位置的坐标方法

    JQuery 提供了方便的方法来获取元素的绝对位置和相对位置坐标。这里我们将详细探讨 `offset()` 和 `position()` 这两个方法，以及如何在实际应用中使用它们。 1. `offset()` 方法： `offset()` 方法用于获取匹配...

    jQuery获得页面元素的绝对/相对位置即绝对X,Y坐标

    使用jQuery库时，我们可以利用其提供的方法来获取元素的绝对和相对位置，这些位置通常用元素左上角的X和Y坐标来表示。 首先，我们来了解一下如何通过jQuery获取页面元素的绝对位置。绝对位置指的是元素相对于整个...

    jquery获取html元素的绝对位置和相对位置的方法

    绝对位置坐标： 代码如下: $(“#elem”).offset().top $(“#elem”).offset().left 相对父元素的位置坐标： 代码如下: $(“#elem”).position().top $(“#elem”).position().left 另： static(默认):默认定位...

    jQuery获取页面元素绝对与相对位置的方法

    本文实例讲述了jQuery获取页面元素绝对与相对位置的方法。分享给大家供大家参考。具体如下： 获取页面某一元素的绝对X,Y坐标，可以用offset()方法： var X = $('#DivID').offset().top; var Y = $('#DivID').offset...

    JavaScript和jQuery获取input框的绝对位置

    总结起来，JavaScript和jQuery提供了多种方式来获取`input`框的绝对位置，包括`getBoundingClientRect()`配合滚动距离计算，以及jQuery的`offset()`方法。开发者可以根据项目需求和浏览器兼容性选择合适的方法。

    jQuery获得指定元素坐标的方法

    在讲解之前，首先需要了解一点基础知识：在Web开发中，元素的位置坐标通常有两种表示方法，即相对定位和绝对定位。相对定位是相对于最近的已定位的父元素进行偏移，而绝对定位则是相对于整个文档进行偏移。在本文中...

    jquery 相对定位 屏幕滚动

    本教程将深入探讨如何利用jQuery实现一种独特的方法，即使用相对定位来实现在屏幕滚动时元素始终保持可见的效果。通常，这种效果通过绝对定位和固定定位来实现，但这个技术的独特之处在于它利用了相对定位。 首先，...

    jquery用offset()方法获得元素的xy坐标

    在实际应用中，offset()和position()方法可以根据需要获得不同类型的坐标信息。它们是前端开发中常用的工具，对于处理动画、交互效果等都非常有帮助。理解这两个方法之间的区别以及如何正确使用它们，对于进行网页...

    jQuery实现仿Google首页拖动效果的方法

    在拖动效果的实现中，需要动态改变元素的样式或位置，这需要使用到jQuery的.css()方法和DOM操作方法，如.offset()获取元素位置，.before()用于在元素之前插入内容等。 4. div层操作技巧： div是HTML文档中的一个...

    jquery设置控件位置的方法

    此外，jQuery还提供了`.offset()`和`.position()`方法来获取元素的位置信息。 - `.offset()`：返回元素相对于文档顶部和左侧的距离，包括边距。这对于获取元素在页面视口中的绝对位置非常有用。 - `.position()`：...

    jQuery 仿Bing搜索引擎图像热点技术

    5. **实现动画效果**：为了让热点的显示和隐藏更生动，可以使用jQuery的动画方法。例如，当鼠标悬停时，热点淡入；移开鼠标时，热点淡出。 6. **优化和测试**：完成基本功能后，进行性能优化，确保在不同浏览器和...

    jQuery背景位置插件_JavaScript_下载.zip

    这可能涉及到相对单位（%）和绝对单位（px）之间的转换。 8. **浏览器兼容性（Browser Compatibility）**：确保插件在不同浏览器中表现一致，可能需要考虑对老版本浏览器的支持，尤其是IE系列。 9. **性能优化...

    Javascript获取鼠标坐标的各种类型

    对于鼠标在特定容器内的相对坐标，`event.offsetX`和`event.offsetY`则非常有用，它们返回鼠标相对于事件源元素的左上角的坐标。 当需要考虑整个文档的滚动时，可以通过`document.documentElement.scrollTop`获取...

    jQuery ui 1.8.7 API.rar

    - Position（定位）：通过设置相对或绝对坐标来精确控制元素的位置，可以考虑容器边界和偏移。 在jQuery UI 1.8.7的API文档中，每个部分都有详细的使用说明和示例代码。例如，要创建一个对话框，你可以使用`$("#...

    JQuery插件图片滚动带放大镜

    基本思路是创建一个浮动的放大镜层，当鼠标移动到图片上时，根据鼠标的相对位置调整放大镜层的大小和位置，展示放大的图像区域。 1. **CSS布局**：放大镜层通常作为图片的兄弟元素，通过绝对定位悬浮于图片上方。...

    jquery 弹出层跟随鼠标移动

    为了实现“鼠标移动则层移动”的效果，我们需要在鼠标移动事件（`mousemove`）中计算新的坐标，并更新弹出层的位置。`.on('mousemove', function(event) {...})` 会为指定元素绑定`mousemove`事件处理器，通过 `...

    jQuery放大镜.rar

    这涉及到JavaScript的坐标转换，包括相对坐标和绝对坐标的计算。 6. **动画效果**：jQuery的`.animate()`方法可以实现平滑的过渡效果，如放大镜的出现、移动和缩放，使用户体验更加流畅。 7. **响应式设计**：为了...

Magicbox
Global site tag (gtag.js) - Google Analytics