js 增强型title信息提示效果

　　效果图:

js 增强型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></b>www.glzy8.com<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> 
<img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%3E%20%0D%0Afunction%20xstooltip_findPosX(obj)%20%0D%0A%7B%20%0D%0Avar%20curleft%20%3D%200%3B%20%0D%0Aif%20(obj.offsetParent)%20%0D%0A%7B%20%0D%0Awhile%20(obj.offsetParent)%20%0D%0A%7B%20%0D%0Acurleft%20%2B%3D%20obj.offsetLeft%20%0D%0Aobj%20%3D%20obj.offsetParent%3B%20%0D%0A%7D%20%0D%0A%7D%20%0D%0Aelse%20if%20(obj.x)%20%0D%0Acurleft%20%2B%3D%20obj.x%3B%20%0D%0Areturn%20curleft%3B%20%0D%0A%7D%20%0D%0Afunction%20xstooltip_findPosY(obj)%20%0D%0A%7B%20%0D%0Avar%20curtop%20%3D%200%3B%20%0D%0Aif%20(obj.offsetParent)%20%0D%0A%7B%20%0D%0Awhile%20(obj.offsetParent)%20%0D%0A%7B%20%0D%0Acurtop%20%2B%3D%20obj.offsetTop%20%0D%0Aobj%20%3D%20obj.offsetParent%3B%20%0D%0A%7D%20%0D%0A%7D%20%0D%0Aelse%20if%20(obj.y)%20%0D%0Acurtop%20%2B%3D%20obj.y%3B%20%0D%0Areturn%20curtop%3B%20%0D%0A%7D%20%0D%0Afunction%20xstooltip_show(tooltipId%2C%20parentId%2C%20posX%2C%20posY)%20%0D%0A%7B%20%0D%0Ait%20%3D%20document.getElementById(tooltipId)%3B%20%0D%0Aif%20((it.style.top%20%3D%3D%20''%20%7C%7C%20it.style.top%20%3D%3D%200)%20%0D%0A%26%26%20(it.style.left%20%3D%3D%20''%20%7C%7C%20it.style.left%20%3D%3D%200))%20%0D%0A%7B%20%0D%0A%2F%2F%20need%20to%20fixate%20default%20size%20(MSIE%20problem)%20%0D%0Ait.style.width%20%3D%20it.offsetWidth%20%2B%20'px'%3B%20%0D%0Ait.style.height%20%3D%20it.offsetHeight%20%2B%20'px'%3B%20%0D%0Aimg%20%3D%20document.getElementById(parentId)%3B%20%0D%0A%2F%2F%20if%20tooltip%20is%20too%20wide%2C%20shift%20left%20to%20be%20within%20parent%20%0D%0Aif%20(posX%20%2B%20it.offsetWidth%20%3E%20img.offsetWidth)%20posX%20%3D%20img.offsetWidth%20-%20it.offsetWidth%3B%20%0D%0Aif%20(posX%20%3C%200%20)%20posX%20%3D%200%3B%20%0D%0Ax%20%3D%20xstooltip_findPosX(img)%20%2B%20posX%3B%20%0D%0Ay%20%3D%20xstooltip_findPosY(img)%20%2B%20posY%3B%20%0D%0Ait.style.top%20%3D%20y%20%2B%20'px'%3B%20%0D%0Ait.style.left%20%3D%20x%20%2B%20'px'%3B%20%0D%0A%7D%20%0D%0Ait.style.visibility%20%3D%20'visible'%3B%20%0D%0A%7D%20%0D%0Afunction%20xstooltip_hide(id)%20%0D%0A%7B%20%0D%0Ait%20%3D%20document.getElementById(id)%3B%20%0D%0Ait.style.visibility%20%3D%20'hidden'%3B%20%0D%0A%7D%20%0D%0A%3C%2Fscript%3E">

　　 [Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

教程首页更多教程