div仿title提示信息效果,增强型title信息提示代码,JS代码库,德仔网

代码语言

代码分类

【JS】 div仿title提示信息效果,增强型title信息提示

作者:Dezai.CN / 发布于2013/2/28/ 671

信息


	<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
	 Time spent: 00:00:08<br/>
	 Page viewed: 4<br/>
	 Browser: Mozilla &ndash; 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>

评论列表

本站所提供的代码，版权归原作者所有，若有侵犯作者版权，请与我们联系，我们将立即删除或修改。谢谢!
本站所有代码发布及提供者。

试试其它关键字

　title　

同语言下

可能有用的

Dezai.CN贡献的其它代码(4037)