一个JavaSript信息提示框的实现

在很多时候我们需要在一个Html控件获得光标的时候在控件旁边显示一个提示框,实现这个关键在于怎么定位当前控件的位置。这个位置可以是相对于浏览器左上角窗口的x,y坐标,也可以是相对于Body的X,Y坐标。相对于第一种方法,第二种方法实现起来会方便些,因为要获得相对于浏览器坐上窗口x,y坐标是比较繁琐在,在不同浏览器下面。

 

现在让我来讲一下,第二种方法我的实现

 

两个比较重要的方法  第一,通过:HtmlObject.OffsetLeft   HtmlObject.offsetTop 来获得HTML控件相对于它的offsetParent 的x和y的距离。  然后,我们遍历offsetParent,将x,y距离相加。最终就得到了控件相对于body 的x,y的距离了。

 

最后我们通过用JavaScript创建一个Div,将提示内容键入到里面,再将Div 通过 appendChild方法加到Html文档的最下面,通过CSS 的positon:absolute 和 left top属性定位控件相对于最近的Body这个 parentElement 的x,y距离。

 

 

这里要说的是,虽然不同的浏览器对offsetParent的定义有不同,但是我们取的offsetLeft 和offsetTop 相对于Body 是准确的。

 

演示效果: 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/23058.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

ospf协议

一、路由协议基础: 1. 静态路由协议缺点: 1)路由不能随着拓扑的变化而自动变化(网络中接口关闭或者故障是不可知的,有无汇总都会有黑洞的——接口故障关闭断电或者网段不存在之后,此时如果有缺省就会出现…

D3D12渲染技术之顶点着色器

相信大家以前用过D3D9的或是编写过Shader的对顶点着色器都比较了解,现在我们回顾一下: cbuffer cbPerObject : register(b0) {float4x4 gWorldViewProj; };void VS(float3 iPosL : POSITION, float4 iColor : COLOR, out float4 oPosH : SV_POSITION,o…

chatgpt赋能python:Python编程教程之抽签程序

Python编程教程之抽签程序 介绍 对于喜欢玩抽签、体育彩票等游戏的人来说,抽签程序是一款非常有用的小工具。抽签程序可以用来随机抽取一定数量的幸运儿,而且运行速度快,结果随机性高,不需要人工干预。 那么,Python…

《大众证券报》报道云创大数据等企业谋取新春“开门红”

近日,《大众证券报》以《拼研发、抓项目、拓市场 南京上市公司谋取新春“开门红”》为题发表新闻报道,描绘包括南京云创大数据科技股份有限公司等南京本地上市公司在新春伊始的生机活力景象,报道这些企业是如何围绕主业谋发展,力争…

游戏版《西部世界》来了!NPC全由AI操控,行动自如有理想和记忆,基于最新GAEA技术系统打造

​ChatGPT彻底引爆了AI领域,也点燃了各赛道玩家的热情。 以虚拟交互体验为例,就已经有不少新产品冒头。 不仅像Chat D-ID这类以ChatGPT驱动的虚拟女友bot花样百出,就连游戏AI NPC也变得火热起来,这几天知名游戏公司育碧要推出AI…

游戏版《西部世界》来了!NPC全由AI操控,行动自如有理想和记忆,基于最新GAEA技术系统打造...

萧箫 发自 凹非寺量子位 | 公众号 QbitAI ChatGPT彻底引爆了AI领域,也点燃了各赛道玩家的热情。 以虚拟交互体验为例,就已经有不少新产品冒头。 不仅像Chat D-ID这类以ChatGPT驱动的虚拟女友bot花样百出,就连游戏AI NPC也变得火热起来&#x…

无人出租车被警察截停后逃逸!AI:我当时害怕极了

新智元报道 编辑:好困 袁榭 snailnj 【新智元导读】愚人节当晚,在美国旧金山上演了史上第一场无人驾驶汽车被警察截停后逃逸的事件,画面爆笑。 警察拦车很常见,但是拦AI开的出租车你见过么? 在最近爆火的一段视频中&…

H5营销海报如何制作,在线制作平台分享

互联网影响着我们的生活习惯,很多人获取消息不再是从别人口中听到、从电视上看到、从报纸上阅读到,但一切消息皆可以从互联网上来获取。而商家们也可以通过互联网进行高效、精准的宣传,方式很简单。通过H5海报制作,巧妙的利用互联…

fast-poster 海报生成器,一分钟完成海报开发。

fast-poster 海报生成器,一分钟完成海报开发。 曾几何时,开发一个海报功能,需要调用底层的绘图API,要熟悉各种不友好的GUI代码。 经过N次迭代和线上生产环境的考验。 现在,开发一个海报功能,只需三步。 …

漫画:是喜,还是悲?AI竟帮我们把Office破活干完了

图文原创:亲爱的数据 国产大模型烈火制造。阿里百度字节美团各科技大佬不等闲。 大模型嘛,重大工程,对我等“怀保小民”来说,只关心怎么用,不关心怎么造。 我来介绍一下自己,我是一个写稿男团组合的成员&am…

腾讯云开发者2022年度热文盘点

01 十亿人都在用的健康码运维体系如何设计? 随着疫情防控模式的迭代,健康码访问DAU逐渐趋于下跌,意味着健康码将逐步完成历史使命,见证着疫情的结束。本文特邀腾讯研发工程师李雄政将从技术架构、可观测体系、运营保障体系等运维体…

“F1 车王”昏迷 10 年能受访了?某杂志 AI 生成“舒马赫专访”惹众怒,涉事主编遭解雇...

整理 | 郑丽媛 出品 | CSDN(ID:CSDNnews) 在赛车世界中,“车王”迈克尔 舒马赫(Michael Schumacher)是无数人心中最伟大的 F1 赛车手:前 16 年的职业生涯几乎刷新了每一项纪录,共获…

马斯克损失126亿美元,仍为世界第二富!网友:“公司太多的烦恼?”

整理 | 朱珂欣 出品 | CSDN程序人生(ID:coder_life) 送人类移民火星,一直是“钢铁侠”马斯克的梦想。 然而,作为拥有 SpaceX 42% 的股份大股东,马斯克近来却事与愿违——火星没去成,还交足了…

「GPT-4.5」来了!地表最强Code Interpreter与Midjourney联动,5分做出大片|附保姆级攻略...

来自|新智元 【导读】Code Interpreter解禁后,可谓游戏规则的改变者。与Midjourney联动做大片,表情包生成,动嘴做表,各种潜能全被一众网友们挖掘出来了。 前段时间,GPT-4变笨引爆舆论,有人甚至把…

GPT-4.5来了!地表最强Code Interpreter与Midjourney联动,5分做出大片 | 附保姆级攻略...

©作者 | 桃子 好困 来源 | 新智元 Code Interpreter解禁后,可谓游戏规则的改变者。与Midjourney联动做大片,表情包生成,动嘴做表,各种潜能全被一众网友们挖掘出来了。 前段时间,GPT-4变笨引爆舆论,有人…

面试不过,大部分是基本功不扎实,来看看这份“地表最强Android面试宝典”

前言 金九银十还有两个月就要来了,错过金三银四的朋友可不能再错过这个黄金时间了。 今年的互联网就业形势 互联网过去几年飞速发展,给的待遇比其他行业都要高不少,并且过去几年入门门槛很低,基本去机构培训几个月就能上岗&…

「GPT-4.5」来了!地表最强Code Interpreter与Midjourney联动,5分做出大片|附保姆级攻略

【导读】Code Interpreter解禁后,可谓游戏规则的改变者。与Midjourney联动做大片,表情包生成,动嘴做表,各种潜能全被一众网友们挖掘出来了。 前段时间,GPT-4变笨引爆舆论,有人甚至把3小时25条额度一口气用…

2022的结尾,对话系统起飞了

文 | 郑楚杰知乎 编者记:近日来,ChatGPT的连续刷屏让人们重新看到了AI的希望,编者通过对ChatGPT的试用,发现其对话能力早已不同于两年前的对话系统了,可以说,有了质的飞跃,向着用户体验奇点迈进…

地表最强Code Interpreter与Midjourney联动,5分做出大片,网友称「GPT-4.5」来了!

夕小瑶科技说 分享 来源 | 新智元 Code Interpreter解禁后,可谓游戏规则的改变者。与Midjourney联动做大片,表情包生成,动嘴做表,各种潜能全被一众网友们挖掘出来了。 前段时间,GPT-4变笨引爆舆论,有人甚至…

OpenAI最强多模态语言模型来了:GPT-4发布

❤️觉得内容不错的话,欢迎点赞收藏加关注😊😊😊,后续会继续输入更多优质内容❤️ 👉有问题欢迎大家加关注私戳或者评论(包括但不限于NLP算法相关,linux学习相关,读研读博…