软件开发培训班 >> 编程开发 >> JavaScript

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>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>

技术文章快速查找

JQuery文字列表向上滚动的代码

javascript来定义类的规范小结

Javascript 匿名函数及其代码模式原理

在JavaScript中typeof的用途介绍

js报$ is not a function 的问题的解决方法

Js+CSS实现的间断和不间断文本滚动代码

CSS+Js遮罩效果的TAB及焦点图片切换(推荐)

关于使用JavaScript的几点建议

相关下载

在线教程导航

软件应用
·Windows8	·Windows7	·Word
·Excel	·PPT	·WPS
Web开发
·ASP	·JavaScript	·DIV+CSS
·JSP	·VbScript	·XML
·PHP
开发语言
·VB	·VC	·ASP.NET
·Java	·C++	·Delphi
数据库开发
·MySQL	·MsSQL	·Access
·Oracle	·DB2
手机系统
·Android	·iOS	·WindowsPhone
网站设计
·Flash	·Dreamweaver	·Fireworks
平面设计
·Photoshop	·CorelDraw	·AutoCAD
·3DsMAX	·Illustrator
网络技术
·网站运营	·网络安全	·网络搭建