鼠标滑过出现提示层效果js代码 javascript（转）

昔日舞曲

浏览: 58367 次
性别:
来自: 北京

最近访客更多访客>>

wknavigator

沧浪之水o

junfeng2010

sinoahoo_xsb

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

JavaScript CSS C C++C#

演示

源码source code：

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<htmlxmlns="http://www.w3.org/1999/xhtml"> 

<head> 

<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/> 

<title>鼠标滑过出现提示层效果js代码javascript</title> 

<scripttype="text/javascript"> 
functionenableTooltips(id){
varlinks,i,h;
if(!document.getElementById||!document.getElementsByTagName)return;
AddCss();

h=document.createElement("span"); 

h.id="btc"; 
h.setAttribute("id","btc");

h.style.position="absolute"; 
document.getElementsByTagName("body")[0].appendChild(h);

if(id==null)links=document.getElementsByTagName("a"); 

elselinks=document.getElementById(id).getElementsByTagName("a"); 

for(i=0;i<links.length;i++){ 
Prepare(links[i]);
}
}functionPrepare(el){
vartooltip,t,b,s,l;

t=el.getAttribute("title"); 

if(t==null||t.length==0)t="link:"; 
el.removeAttribute("title");

tooltip=CreateEl("span","tooltip"); 

s=CreateEl("span","top"); 
s.appendChild(document.createTextNode(t));
tooltip.appendChild(s);

b=CreateEl("b","bottom"); 

l=el.getAttribute("href"); 

if(l.length>30)ll=l.substr(0,27)+"..."; 
b.appendChild(document.createTextNode(l));
tooltip.appendChild(b);
setOpacity(tooltip);

el.tooltip=tooltip; 

el.onmouseover=showTooltip; 

el.onmouseout=hideTooltip; 

el.onmousemove=Locate; 
}functionshowTooltip(e){
document.getElementById("btc").appendChild(this.tooltip);
Locate(e);
}functionhideTooltip(e){

vard=document.getElementById("btc"); 

if(d.childNodes.length>0)d.removeChild(d.firstChild); 
}functionsetOpacity(el){

el.style.filter="alpha(opacity:95)"; 

el.style.KHTMLOpacity="0.95"; 

el.style.MozOpacity="0.95"; 

el.style.opacity="0.95"; 
}functionCreateEl(t,c){

varx=document.createElement(t); 

x.className=c; 

x.style.display="block"; 
return(x);
}functionAddCss(){

varl=CreateEl("link"); 
l.setAttribute("type","text/css");
l.setAttribute("rel","stylesheet");
l.setAttribute("href","?.css");
l.setAttribute("media","screen");
document.getElementsByTagName("head")[0].appendChild(l);
}functionLocate(e){

varposx=0,posy=0; 

if(e==null)e=window.event; 
if(e.pageX||e.pageY){

posx=e.pageX;posy=e.pageY; 
}
elseif(e.clientX||e.clientY){
if(document.documentElement.scrollTop){

posx=e.clientX+document.documentElement.scrollLeft; 

posy=e.clientY+document.documentElement.scrollTop; 
}
else{

posx=e.clientX+document.body.scrollLeft; 

posy=e.clientY+document.body.scrollTop; 
}
}

document.getElementById("btc").style.top=(posy+10)+"px"; 

document.getElementById("btc").style.left=(posx-20)+"px"; 
}

</script> 

<scripttype="text/javascript"> 

window.onload=function(){enableTooltips()}; 

</script> 

<styletype="text/css"> 
body{font:76%/1.5Arial,sans-serif;background:#FFF;color:#333}
div#container{width:500px;margin:0auto}
h1{color:#3CA3FF;margin:1em00;letter-spacing:-2px}
p{margin:001.7em}
a{color:#F60;font-weight:bold}
a:hover{color:#F00}
.tooltip{
width:200px;color:#000;
font:lighter11px/1.3Arial,sans-serif;
text-decoration:none;text-align:center}.tooltipspan.top{padding:30px8px0;
background:url(http://www.51flash.cn/wp-content/uploads/2007/0908/200708171844190.gif)no-repeattop}.tooltipb.bottom{padding:3px8px15px;color:#548912;
background:url(http://www.51flash.cn/wp-content/uploads/2007/0908/200708171844190.gif)no-repeatbottom}

</style> 

</head> 

<body> 

<divid="container"> 

<p><ahref="http://www.51flash.cn"title="welcometoyou">51flash.cn</a></p> 

</div> 

</body> 

</html> 