`

jquery如何获得页面元素的坐标值

 
阅读更多
jquery如何获得页面元素的坐标值   yulutxt是输入经典语录的输入框,feedBackMessage函数见http://www.wesoho.com/article/asp/2765.htm

var p = $("#yulutxt");
var yuluoffset = p.offset();
feedBackMessage(msg,yuluoffset.left+p.width()+10,yuluoffset.top,5000);

-------------------

1,获取对象(自定义调整打开新窗口参照元素)
var obj = $("#oButton");
实例中我获取的对象是弹出窗口按钮,这样创建的新窗口就会根椐按钮的位置进行调整,实例中将创建的新窗口显示的按钮的右下角。

2,获取对象元素的位置(offset()方法)
var offset = obj.offset();
获取对象元素的位置,分别是元素的top和left,调用方法是:offset.left和offset.top,可知当前对象的左部和顶部位置。

3,获取对象元素的宽度(width()方法)
var right = offset.left+obj.width();
实例中是获取对象的右下角位置,创建新窗口的左部位置。

4,获取对象元素的高度(height()方法)
var down = offset.top+obj.height();
实例中是获取对象的右下角位置,创建新窗口的顶部位置。

分享到:
评论

相关推荐

    jquery获得页面元素的坐标值实现思路及代码

    本知识点将详细介绍使用jQuery获得页面元素坐标值的实现思路及代码。 ### jQuery中获得页面元素坐标值的方法 1. **offset()方法** jQuery提供了`offset()`方法来获取元素相对于文档的偏移量。该方法返回一个包含`...

    jQuery 获得控件的坐标位置

    jQuery 提供了一系列方法来方便地获取这些坐标值。本文将详细介绍如何使用 jQuery 来获取元素相对于窗口以及滚动条的位置。 #### 一、`offset()` 方法 `offset()` 方法用于获取元素相对于文档的当前位置(不包括...

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

    总结来说,通过jQuery的offset()方法,我们可以很容易地获取到页面元素相对于文档的坐标位置,这对于进行页面元素定位和交互设计是非常有帮助的。在实际应用中,开发者可以根据需要对获取到的坐标值进行各种操作,以...

    jQuery实现拖拽页面元素并将其保存到cookie的方法

    这个函数检查cookie中是否保存了对应元素ID的位置信息,并将这些信息解码转换回具体的left/top坐标值,应用到页面元素上,实现了拖拽位置的持久化。 **知识点4:实际开发中的数据存储建议** 虽然文章中提供了通过...

    jQuery.scrollTo 2.1.2

    1. **平滑滚动**:jQuery.scrollTo能够使页面元素平滑地滚动到指定位置,提供了一种优雅的用户体验,相比传统的JavaScript跳转,这种方式更加流畅且视觉效果更佳。 2. **动态效果**:该插件支持添加各种动画效果,...

    jQuery实现可以拖动及查看自定义坐标刻度尺效果.zip

    5. **用户交互反馈**:在拖动过程中,提供视觉反馈让用户知道他们正在操作的是哪个元素,以及当前坐标是多少,这可以通过改变鼠标光标、高亮元素或显示坐标值来实现。 6. **数据绑定**:如果坐标刻度尺是数据可视化...

    JQuery Flot 统计图

    - **cursor**:添加鼠标光标,展示当前坐标值。 - **selection**:允许用户通过拖动选择图表区域,进行数据聚焦。 通过合理组合和定制,jQuery Flot 可以满足各种复杂的统计图需求,无论是在数据分析、报表展示还是...

    JQuery获取鼠标坐标

    需要注意的是,由于不同浏览器对事件对象的属性命名可能有所不同,这里使用了兼容性处理,确保在多种浏览器环境下都能正确获取坐标值。 ### 原生JavaScript获取鼠标坐标 #### 工作原理 原生JavaScript获取鼠标...

    jquery右侧悬浮弹出在线客服特效

    3. **CSS样式和定位**:为了让按钮悬浮在右侧,我们需要使用CSS的`position`属性设置为`fixed`或`absolute`,并调整`right`、`top`等坐标值使其保持在屏幕边缘。弹出的对话框可能还需要考虑`z-index`来确保其位于...

    jquery 图形选择插件

    松开鼠标后,这个矩形框将固定在图片上,同时提供了一种方式来获取和展示选择区域的坐标值。该插件是基于jQuery构建的,因此它可以轻松地与其他jQuery库和代码集成,为开发者提供了极大的便利。 **主要特性** 1. *...

    利用jQuery实现图片散乱无序排列展示特效源码.zip

    2. **随机位置生成**:为了让图片散乱无序排列,需要为每张图片生成随机的坐标值。这通常涉及到JavaScript的Math对象,如`Math.random()`函数,它可以生成0到1之间(包括0但不包括1)的随机数。通过调整范围,可以...

    jquery鼠标事件

    用户双击页面元素时触发该事件。可用于编辑或查看详细信息等场景。 ```javascript $("selector").dblclick(function(){ // 双击后的处理逻辑 }); ``` #### 3. `onMouseDown`:按下鼠标键事件 鼠标键被按下时触发。...

    jQuery jcrop插件截图使用方法

    3. 使用jQuery对图片元素调用Jcrop方法,初始化裁剪功能,并且可以通过选项来设置裁剪区域的宽高比(aspectRatio)、裁剪区域大小的最小值(minSize)以及其他可能的参数,如onChange和onSelect事件,这些事件用于...

    jQuery 常用代码集锦(必看篇)

    其次,获取鼠标当前的X和Y坐标可以通过绑定鼠标移动事件,并在事件触发时获取当前鼠标的坐标值,并将其展示在页面的指定元素中。这常用于鼠标追踪或者用户交互分析中。 再来,判断一个图片是否已经完全加载可以通过...

    Jquery 动态添加按钮实现代码

    - **正则表达式规则**: 示例中使用了正则表达式来确保用户输入的是有效的数字坐标值。 #### 7. 动态元素与事件绑定 - **动态绑定**: 当通过脚本动态创建元素并插入到DOM中后,需要使用事件委托机制来确保动态元素也...

    jQuery插件ImgAreaSelect实现头像上传预览和裁剪功能实例讲解一

    然后,用户可以拖拽裁剪框,并通过ImgAreaSelect插件的API获取裁剪区域的坐标值,再将这些坐标值显示在页面上的文本框中。 需要注意的是,本文档中提供的代码示例和步骤仅供参考,实际应用时可能需要根据具体需求...

    jquery实现拖拽调整Div大小

    在文档中,通过记录变量_startX和_startY来存储鼠标按下时的X轴和Y轴坐标值。这些值会在后续计算过程中用于确定鼠标移动的距离,从而调整DIV的大小。 3. 动态调整DIV的尺寸 当用户拖拽鼠标时,通过计算鼠标当前的...

    js控制div分散合拢淡出淡入效果

    3. 在每次更新中,根据预定的算法增加或减少div的坐标值,模拟分散运动。 4. 当达到预设的极限位置时,停止更新。 接下来,我们来讨论合拢效果。与分散类似,合拢是将分散的div元素重新聚集到一起的过程。这通常...

Global site tag (gtag.js) - Google Analytics