ToolTip功能
直接看效果图：
使用普通的HTML属性alt只能简单地提示一些文本，如上这些复杂的功能就需要用JavaScript实现。
详细代码如下：
Code<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
body {
margin: 20px;
font: 11px "lucida granda", verdana, sans-serif;
}
#tooltip {
width: 240px;
background-color: #FFFACD;
padding: 10px 10px 10px 10px;
position: absolute;
border: 5px solid #313131;
}
</style>
<script type="text/javascript" src="publicMethods.js"></script>
<script type="text/javascript">
var isIE = window.ActiveXObject?true:false;
function setOpacity(ele,value) {
ele = $(ele);
if (isIE) setStyle(ele,{"filter":"alpha(opacity:" + Math.round(value*100) + ")"});
else setStyle(ele,{"opacity":value});
}
function getOpacity(ele) {
ele = $(ele);
var opacity;
if (isIE) {
opacity = getStyle(ele,"filter");
opacity = parseFloat(stripAlpha(opacity))/100;
} else {
opacity = parseFloat(getStyle(ele,"opacity"));
}
return opacity;
}
var status = [];
function fadeIn(ele) {
ele = $(ele);
if (!status["tooltip"]) return;
var currentOpacity = getOpacity(ele);
if (currentOpacity >= 1) {
setOpacity(ele,1);
return;
} else {
setOpacity(ele,currentOpacity + 0.02);
setTimeout(function (){fadeIn(ele);},20);
}
}
function fadeOut(ele) {
ele = $(ele);
if (status["tooltip"]) return;
var currentOpacity = getOpacity(ele);
if (currentOpacity <= 0.01) {
setOpacity(ele,0);
setStyle("tooltip",{"display":"none"});
return;
} else {
setOpacity(ele,currentOpacity - 0.02);
setTimeout(function (){fadeOut(ele);},20);
}
}
function showTip(evt) {//debugger;
status["tooltip"] = true;
setOpacity("tooltip",0.0);
var event = window.event?window.event:evt;
var left = event.clientX + 10;
var top = event.clientY + 10;
var style = {"left":left+"px","top":top+"px","display":""};
setStyle("tooltip",style);
fadeIn("tooltip");
}
function hideTip() {//debugger;
status["tooltip"] = false;
setTimeout(function (){fadeOut("tooltip");},100);
}
function stripAlpha(opacity) {
var index = opacity.indexOf("opacity") + "opacity:".length;
var endIndex = opacity.indexOf(",",index) == -1 ? opacity.indexOf(")",index)
: opacity.indexOf(",",index);
var ret = opacity.substring(index,endIndex);
return ret;
}
function init() {
addEventListener($("test"),"mouseover",showTip);
addEventListener($("test"),"mouseout",hideTip);
addEventListener($("tooltip"),"mouseover",function(){status["tooltip"]=true;});
addEventListener($("tooltip"),"mouseout",hideTip);
}
</script>
</head>
<body onload="init()">
<a href="#" id="test">Test</a>
<div id="tooltip" style="display:none;">
<h3>ToolTip</h3>
<img src="gl.jpg" />
<p>这是使用JavaScript实现的工具提示功能。</p>
</div>
</body>
</html>
公共函数：
Codefunction $(id) {
return (typeof id == "string")? document.getElementById(id):id;
}
function setStyle(ele,style) {
ele = $(ele);
for (p in style)
{ele.style[p] = style[p];}
}
function getStyle(ele,name) {
var style = ele.currentStyle?ele.currentStyle:document.defaultView.getComputedStyle(ele,null);
return style[name];
}
function addEventListener(ele,type,func) {
if (ele.addEventListener) ele.addEventListener(type,func,false);
else ele.attachEvent("on"+type,func);
}
