Js实现ToopTip
Js实现ToopTip
浏览器中实现ToopTip,高兼容性。
<html>
<head>
<script>
/*
舜子制作
Made by PuterJam
*/
//--初始化变量--
var rT=true;//允许图像过渡
var bT=true;//允许图像淡入淡出
var tw=300;//提示框宽度
var endaction=false;//结束动画
var ns4 = document.layers;
var ns6 = document.getElementById && !document.all;
var ie4 = document.all;
offsetX = 0;
offsetY = 20;
var toolTipSTYLE="";
function initToolTips()
{
if(ns4||ns6||ie4)
{
if(ns4) toolTipSTYLE = document.toolTipLayer;
else if(ns6) toolTipSTYLE = document.getElementById("toolTipLayer").style;
else if(ie4) toolTipSTYLE = document.all.toolTipLayer.style;
if(ns4) document.captureEvents(Event.MOUSEMOVE);
else
{
toolTipSTYLE.visibility = "visible";
toolTipSTYLE.display = "none";
}
document.onmousemove = moveToMouseLoc;
}
}
function toolTip(msg, fg, bg)
{
if(toolTip.arguments.length < 1) // hide
{
if(ns4)
{
toolTipSTYLE.visibility = "hidden";
}
else
{
//--图象过渡,淡出处理--
if (!endaction) {toolTipSTYLE.display = "none";}
if (rT) document.all("msg1").filters[1].Apply();
if (bT) document.all("msg1").filters[2].Apply();
document.all("msg1").filters[0].opacity=0;
if (rT) document.all("msg1").filters[1].Play();
if (bT) document.all("msg1").filters[2].Play();
if (rT){
if (document.all("msg1").filters[1].status==1 || document.all("msg1").filters[1].status==0){
toolTipSTYLE.display = "none";}
}
if (bT){
if (document.all("msg1").filters[2].status==1 || document.all("msg1").filters[2].status==0){
toolTipSTYLE.display = "none";}
}
if (!rT && !bT) toolTipSTYLE.display = "none";
//----------------------
}
}
else // show
{
if(!fg) fg = "#777777";
if(!bg) bg = "#eeeeee";
var content =
'<table id="msg1" name="msg1" border="0" cellspacing="0" cellpadding="1" bgcolor="' + fg + '" class="trans_msg"><td>' +
'<table border="0" cellspacing="0" cellpadding="3" bgcolor="' + bg +
'"><td width=' + tw + '><font face="Arial" color="' + fg +
'" size="-1">' + msg +
' \;</font></td></table></td></table>';
if(ns4)
{
toolTipSTYLE.document.write(content);
toolTipSTYLE.document.close();
toolTipSTYLE.visibility = "visible";
}
if(ns6)
{
document.getElementById("toolTipLayer").innerHTML = content;
toolTipSTYLE.display='block'
}
if(ie4)
{
document.all("toolTipLayer").innerHTML=content;
toolTipSTYLE.display='block'
//--图象过渡,淡入处理--
var cssopaction=document.all("msg1").filters[0].opacity
document.all("msg1").filters[0].opacity=0;
if (rT) document.all("msg1").filters[1].Apply();
if (bT) document.all("msg1").filters[2].Apply();
document.all("msg1").filters[0].opacity=cssopaction;
if (rT) document.all("msg1").filters[1].Play();
if (bT) document.all("msg1").filters[2].Play();
//----------------------
}
}
}
function moveToMouseLoc(e)
{
if(ns4||ns6)
{
x = e.pageX;
y = e.pageY;
}
else
{
x = event.x + document.body.scrollLeft;
y = event.y + document.body.scrollTop;
}
toolTipSTYLE.left = x + offsetX;
toolTipSTYLE.top = y + offsetY;
return true;
}
</script>
<style type="text/css">
<!--
.trans_msg
{
filter:alpha(opacity=100,enabled=1) revealTrans(duration=.2,transition=1) blendtrans(duration=.2);
}
-->
</style>
</head>
<body>
<div id="toolTipLayer" style="position:absolute; visibility: hidden"></div><script>initToolTips()</script>
<a id="Hyperlink1" class="word" NAME="Hyperlink1" onMouseOut="toolTip()" onMouseOver="toolTip('博客园.Net技术交流平台','#000000','#ffffe1')" href="ksdtxx_detail.aspx?BoardID=179">博客园</a>
</body>
</html>
----------------------------------------------------------------------------------------------------
tooptip,这个版本比较好看
function ToolTip()
{
}
ToolTip.Items = [];
ToolTip.Add = function(tip)
{
this.Items.push(tip);
};
ToolTip.Init = function()
{
for(var i=0; i<this.Items.length; ++i)
{
var tip = this.Items[i];
var obj = document.getElementById(tip.ID);
obj.Object = tip;
obj.timer = null;
obj.onmousemove = function(evt)
{
var o = this.Object;
if( o.Tip == null )
{
var div = document.createElement("DIV");
div.id = "toolTip";
if(!o.Border) o.Border = "solid 2px ";
if(!o.BorderColor) o.BorderColor = "red";
if(!o.BgColor) o.BgColor = "white";
if(!o.Color) o.Color = "black";
div.innerHTML = o.Text;
with(div.style)
{
border = o.Border + o.BorderColor;
backgroundColor = o.BgColor;
position = "absolute";
display = "none";
padding = "5px";
fontSize = "9pt";
textAlign = "left";
color = o.Color;
}
document.body.appendChild(div);
o.Tip = div;
}
var left,top;
if( evt )
{
left = evt.clientX;
top = evt.clientY;
}
else
{
left = event.x;
top = event.y;
}
left += (window.document.documentElement.scrollLeft + 10);
top += (window.document.documentElement.scrollTop + 10);
window.stats = left + "," + top;
o.Tip.style.top = top + "px";
o.Tip.style.left = left + "px";
if( o.Tip.style.display == "none")
{
ToolTip.DoFading("Fade", false, o.Tip);
}
};
obj.onmouseover = function(evt)
{
this.timer = window.setTimeout(ToolTip.HideToolTip, 5000, this);
};
obj.onmouseout = function(evt)
{
ToolTip.DoFading("Fade", true, this.Object.Tip);
window.clearTimeout(this.timer);
};
}
};
ToolTip.HideToolTip = function(e)
{
ToolTip.DoFading("Fade", true, e.Object.Tip);
window.clearTimeout(e.timer);
};
ToolTip.GetFilters = function(effect, e, alphaValue)
{
var filterString = 'progid:DXImageTransform.Microsoft.';
switch(effect)
{
case 'GradientWipeLeft2Right' :
{
filterString += "GradientWipe(duration='0.5',gradientSize='0.75',motion='forward')";
break;
}
case 'GradientWipeUp2Down' :
{
filterString += "GradientWipe(duration='0.5',gradientSize='0.25',motion='forward',wipeStyle='1')";
break;
}
case 'RevealTrans' :
{
filterString += "RevealTrans(duration='0.5',transition='12')";
break;
}
case 'Fade' :
{
filterString += 'Fade()';
break;
}
case 'Alpha':
{
filterString += 'Alpha(' + alphaValue + ')';
break;
}
default :
{
filterString = '';
break;
}
}
e.style.filter = filterString;
};
ToolTip.DoFading = function(effect, out, e)
{
this.GetFilters(effect, e);
if( e.filters && e.filters.length > 0 )
{
var filter = e.filters.item(0);
filter.apply();
if( out )
{
e.style.display = "";
e.style.display = "none";
filter.play(0.25);
}
else
{
e.style.display = "none";
e.style.display = "";
filter.play(0.25);
}
}
else
{
e.style.display = out ? "none" : "";
}
};
function Tip(id, text, border, borderColor, backgroundColor, color)
{
this.ID = id;
this.Text = text;
this.Border = border;
this.BorderColor = borderColor;
this.BgColor = backgroundColor;
this.Color = color;
this.Tip = null;
}
使用方法:
<html>
<body>
<div id="toolTipLayer" style="position:absolute; visibility: hidden"></div><script>initToolTips()</script>
<a id="Hyperlink1" class="word" NAME="Hyperlink1" href="ksdtxx_detail.aspx?BoardID=179">博客园1</a>
<a id="Hyperlink2" class="word" NAME="Hyperlink2" href="ksdtxx_detail.aspx?BoardID=179">博客园2</a>
</body>
</html>
<script type="text/javascript">
tip = new Tip("Hyperlink1", "博客园1");
ToolTip.Add(tip);
tip = new Tip("Hyperlink2", "博客园2");
ToolTip.Add(tip);
ToolTip.Init();
</script>