首页 > 网络编程 > JavaScript > javascript技巧 > js 增强型title信息提示

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 增强型title信息提示效果

您可能感兴趣的文章: