您的位置：首页 > Web前端 > JavaScript

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

2010-06-01 10:44 579 查看

<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>学it:</b>www.aspxcs.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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航