`
isiqi
  • 浏览: 16572270 次
  • 性别: Icon_minigender_1
  • 来自: 济南
社区版块
存档分类
最新评论

使用js动态定位目标

 
阅读更多
背景 :
有时候你想定位一个按钮或者图片(比如为了鼠标一移上去就会弹出一个层),想知道它到底处于屏幕的那个坐标,而且很多页面都要用包含这个按钮,js中有很多xxxleft,xxxtop属性,到底该怎么用

下面的代码来自同事的灵感,特此记录已备忘

varx
=obj.offsetLeft;
vary
=obj.offsetTop;

varrect
=[0,0];
varel
=obj;
while(el!=null&&el!=document.body)
...{
rect[
0]=rect[0]+el.offsetLeft;
rect[
1]=rect[1]+el.offsetTop;
el
=el.offsetParent;
}


x
=rect[0];
y
=rect[1];

上面的代码采用递归预算出你的定位对象的绝对坐标,这段代码只需传入一个参数就是obj,即你定为的对象
分享到:
评论

相关推荐

    无缝滑动定位js

    无缝滑动定位js是一种网页交互效果,主要用于提升用户体验,特别是在导航菜单和楼层模拟场景中。这一技术通过JavaScript实现,能够使页面内容平滑地在不同部分之间切换,为用户创造流畅且连续的浏览体验。 首先,...

    JS如何实现在页面上快速定位(锚点跳转问题)

    目前,a标签的href属性可以与id属性结合使用,不仅能够作为超链接使用,还能作为锚点定位目标。 此外,URL中的“#”符号经常被用作锚点的标志。当在浏览器地址栏输入一个带有锚点的URL时,浏览器会尝试跳转到页面中...

    js定位示例

    本示例主要探讨了两种使用JavaScript进行定位的方法,包括原生JavaScript定位和jQuery定位,这两种方法都能帮助开发者实现当用户点击某个对象时,页面自动滚动至特定位置的效果。下面我们将详细讲解这两种定位方式...

    页面位置动态定位导航菜单

    为了提供更好的用户体验,可以使用JavaScript实现平滑滚动效果,当用户点击导航菜单中的链接时,不是立即跳转,而是以动画形式慢慢滚动到目标位置。这可以通过`window.scrollTo`的平滑滚动选项或者使用jQuery的`...

    使用Tensorflowjs基于YOLO模型实现浏览器中的目标检测

    本项目将详细介绍如何使用TensorFlow.js结合YOLO(You Only Look Once)模型,在浏览器中实现实时的目标检测功能。 YOLO是一种流行的实时目标检测算法,它能够在单个神经网络中同时进行分类和定位,以高效的方式...

    js锚点定位

    虽然HTML的`<a>`标签已经提供了基本的锚点定位功能,但有时候我们需要用JavaScript进行更复杂的控制,例如延迟滚动、平滑滚动或者在滚动到目标位置时执行某些操作。以下是一个简单的JavaScript实现: ```javascript...

    js实现目录定位正文

    本示例通过JavaScript实现了这一功能,无需手动设置每一层的高度,而是通过自动识别层的高度来实现精确的定位。下面我们将详细探讨JavaScript在目录定位中的实现原理和步骤。 首先,我们需要理解HTML结构。通常,...

    js 实现锚平滑定位页面

    在JavaScript中实现锚点平滑定位页面是前端开发中的常见需求,本文将详细介绍这一过程。 首先,我们需要理解HTML锚点的基本原理。在HTML中,我们可以通过设置`<a>`标签的`href`属性为`#target`来创建一个锚点链接,...

    javaScript动态添加Li元素的实例

    无论是使用innerHTML还是createElement方法,核心目标都是通过编程手段操作DOM树,实现动态内容的增删改查。在实际应用中,选择哪种方法取决于具体的需求场景以及开发者的偏好。如果需要插入的内容结构复杂,通常...

    ast-hook用于js逆向根据参数值快速定位到生成加密参数位置

    `ast-hook`工具就是针对这种情况设计的,它专注于帮助开发者在JavaScript代码中快速定位到特定参数值的生成位置,特别是涉及到加密参数的场景。本文将详细探讨`ast-hook`的工作原理、使用方法以及它在js逆向工程中的...

    使用Create react在react js实现面部和标记检测+手势识别+手定位检测+实时分割+实时目标检测+人脸标记检测

    使用Create react应用程序在react js上构建的网站/网页。 实现了以下功能 面部和标记检测 手势识别 手定位检测 实时分割 实时目标检测 人脸地标检测 人脸地标检测是一项计算机视觉任务,我们希望检测和跟踪人脸上...

    html css 原生js实现动态京东页面

    在本项目中,我们将深入探讨如何使用HTML、CSS和原生JavaScript来实现一个动态的京东页面,这个页面包含了丰富的交互功能,如轮播图、自动轮播、倒计时(适用于秒杀模块)以及点击切换等特性。这些技术是前端开发的...

    动态生成JS动态给网站添加悬浮广告及弹窗等

    首先,动态生成JS(JavaScript)意味着在用户请求网页时,服务器会根据特定条件或配置生成相应的JavaScript代码,并将其嵌入到HTML页面中。这种方式的好处在于,站长可以根据不同的时间、用户行为或者用户群体定制...

    JS动态平滑滚动菜单效果.rar

    "JS动态平滑滚动菜单效果"是一个常见的JavaScript应用,它主要用于网站的导航菜单。这种效果可以使用户在点击菜单项时,页面能够平滑地滚动到相应的位置,而非瞬间跳转,从而提供更加流畅、舒适的浏览体验。 首先,...

    网页楼层定位jq,js,demo.zip

    1. **JavaScript(js)**:JavaScript是一种轻量级的解释型编程语言,常用于网页动态效果的实现。在楼层定位中,js可以监听用户的点击事件,当用户点击某个楼层链接时,JavaScript会获取对应的ID或名称,并通过`...

    【JavaScript源代码】vue实现锚点定位功能.docx

    总结,Vue.js 实现锚点定位功能结合了 HTML、CSS 和 JavaScript 三者的力量,通过监听滚动事件,动态更新视图状态,以及使用平滑滚动技术,提供了一种优雅的页面导航体验。在实际开发中,开发者还应关注性能优化,...

    js自动校验之动态生成错误提示信息节点(复习下如何操作dom节点)

    这篇博客“js自动校验之动态生成错误提示信息节点”显然关注的就是这个主题,它会指导我们如何利用JavaScript来操作DOM,以便在用户输入不符合预期时,即时显示错误信息。 首先,我们要理解DOM的基本操作,包括创建...

    前端-搜索高亮、字体放大及锚点定位功能

    在nuxt.js中,可以利用`<nuxt-link>`组件来创建锚点链接,同时使用JavaScript监听滚动事件,判断当前滚动位置是否接近锚点,如果接近则添加或移除高亮类,以便于用户识别当前位置。 具体实现时,可能还需要考虑到...

    前端项目-popper.js.zip

    Popper.js是一个强大的JavaScript库,专门用于创建和管理弹出元素,如提示、下拉菜单、模态框等。在前端开发中,这样的功能通常被称为"定位器"或"弹出器"。这个库由Federico Zivolo创建,其目标是提供一个灵活且高...

    JS使用百分比确定图标坐标点击事件Demo

    通过运用CSS媒体查询(media queries)和JavaScript动态调整,可以实现这一目标。 总的来说,这个示例展示了如何在JavaScript和HTML5环境下,利用百分比坐标进行图标定位,并实现跨平台的点击事件处理。通过理解并...

Global site tag (gtag.js) - Google Analytics