js 增强型title信息提示效果

更新时间：2010年06月02日 13:47:55 作者：

js操作div仿title提示信息效果,增强型title信息提示，效果不错。

效果图:

演示代码:

<html> <head> <style type="text/css"> .xstooltip { visibility: hidden; position: absolute; top: 0; left: 0; z-index: 2; font: normal 8pt sans-serif; padding: 3px; border: solid 1px; } </style> </head> <body> <div id="test" onmouseover="xstooltip_show('tooltip_123', 'test', 0, 20);" onmouseout="xstooltip_hide('tooltip_123');">显示注释</div> <div id="tooltip_123" class="xstooltip"> <b>jb51</b>www.jb51.net<br> Time spent: 00:00:08<br> Page viewed: 4<br> Browser: Mozilla – 1.7.11<br> Operating system: Linux - i686 (x86_64) </div> </body> </html> <script> function xstooltip_findPosX(obj) { var curleft = 0; if (obj.offsetParent) { while (obj.offsetParent) { curleft += obj.offsetLeft obj = obj.offsetParent; } } else if (obj.x) curleft += obj.x; return curleft; } function xstooltip_findPosY(obj) { var curtop = 0; if (obj.offsetParent) { while (obj.offsetParent) { curtop += obj.offsetTop obj = obj.offsetParent; } } else if (obj.y) curtop += obj.y; return curtop; } function xstooltip_show(tooltipId, parentId, posX, posY) { it = document.getElementById(tooltipId); if ((it.style.top == '' || it.style.top == 0) && (it.style.left == '' || it.style.left == 0)) { // need to fixate default size (MSIE problem) it.style.width = it.offsetWidth + 'px'; it.style.height = it.offsetHeight + 'px'; img = document.getElementById(parentId); // if tooltip is too wide, shift left to be within parent if (posX + it.offsetWidth > img.offsetWidth) posX = img.offsetWidth - it.offsetWidth; if (posX < 0 ) posX = 0; x = xstooltip_findPosX(img) + posX; y = xstooltip_findPosY(img) + posY; it.style.top = y + 'px'; it.style.left = x + 'px'; } it.style.visibility = 'visible'; } function xstooltip_hide(id) { it = document.getElementById(id); it.style.visibility = 'hidden'; } </script>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

您可能感兴趣的文章:

JS禁用页面上所有控件的实现方法(附demo源码下载)
这篇文章主要介绍了JS禁用页面上所有控件的方法,涉及JavaScript捕捉页面元素的相关技巧,并附带demo源码供读者下载参考,需要的朋友可以参考下
2015-12-12
详解如何使用JavaScript实现自定义的双向数据绑定
双向数据绑定是一种编程模式,用于在用户界面和数据模型之间实现数据的同步更新,它允许用户界面中的数据变化自动更新到数据模型中,在这篇文章中,我会使用基于观察者模式和基于Proxy对象来实现JS的自定义双向数据绑定
2023-08-08
JavaScript初学者的10个迷你技巧
虽然JavaScript有很多的编程方法，但这里只挑选了10个技巧，这些技巧对初学者理解JavaScript来说是很好的的起点。
2010-09-09
javascript中先加加和后加加区别 ++a和a++区别解析
从学习 javascript 开始,就对先加加和后加加模糊不清,时至今日,再来学习一下,这篇文章主要介绍了javascript中先加加和后加加区别++a和a++区别解析,需要的朋友可以参考下
2023-09-09
JS中字符串trim()使用示例
本文主要给大家介绍的是javascript中的扩展方法字符串trim()的使用指南，十分的简单实用，有需要的小伙伴可以参考下。
2015-05-05
JavaScript中判断网络状态的几种方法
这篇文章主要介绍了如何使用JavaScript的`navigator.onLine`属性和`ononline`、`onoffline`事件来检测浏览器的在线状态,并提供了兼容性代码示例,需要的朋友可以参考下
2025-02-02
javascript制作照片墙及制作过程中出现的问题
这篇文章主要介绍了javascript制作照片墙及制作过程中出现的问题，感兴趣的朋友可以参考一下
2016-04-04
TypeScript中d.ts类型声明文件的实现
.d.ts 文件是 TypeScript 的类型声明文件,它们的主要作用是为 JavaScript 库提供类型支持,本文主要介绍了TypeScript中d.ts类型声明文件的实现,感兴趣的可以了解一下
2023-10-10
JavaScript中的JSON转为Python可读取
本文主要介绍了JavaScript中的JSON转为Python可读取，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-01-01
JavaScript声明变量的这四兄弟(var、let、function、const)
这篇文章主要介绍了JavaScript声明变量的这四兄弟，主要就是介绍var、let、function、const区别,需要的朋友可以参考下
2023-02-02

js 增强型title信息提示效果

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具