很漂亮的JS+CSS链接提示_文本链接特效

一款很漂亮的JavaScript结合CSS共同打造的链接提示效果，像一个气泡一样，看着很舒服。看了代码就会知道，其实那个漂亮的提示是一个背景图片，用JS去控制图片的显示区域，总体来说，效果还是不错的。

<!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>
<title>链接提示</title>

<SCRIPT type=text/javascript> 
function enableTooltips(id){ 
var links,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"); 
else links=document.getElementById(id).getElementsByTagName("a"); 
for(i=0;i<links.length;i++){ 
Prepare(links[i]); 
} 
}function Prepare(el){ 
var tooltip,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) l=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; 
}function showTooltip(e){ 
document.getElementById("btc").appendChild(this.tooltip); 
Locate(e); 
}function hideTooltip(e){ 
var d=document.getElementById("btc"); 
if(d.childNodes.length>0) d.removeChild(d.firstChild); 
}function setOpacity(el){ 
el.style.filter="alpha(opacity:95)"; 
el.style.KHTMLOpacity="0.95"; 
el.style.MozOpacity="0.95"; 
el.style.opacity="0.95"; 
}function CreateEl(t,c){ 
var x=document.createElement(t); 
x.className=c; 
x.style.display="block"; 
return(x); 
}function AddCss(){ 
var l=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); 
}function Locate(e){ 
var posx=0,posy=0; 
if(e==null) e=window.event; 
if(e.pageX || e.pageY){ 
posx=e.pageX; posy=e.pageY; 
} 
else if(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>

<SCRIPT type=text/javascript> 
window.onload=function(){enableTooltips()}; 
</SCRIPT>

<STYLE type=text/css> 
body{font: 76%/1.5 Arial,sans-serif;background: #FFF;color: #333} 
div#container{width: 500px;margin:0 auto} 
h1{color: #3CA3FF;margin: 1em 0 0;letter-spacing: -2px} 
p{margin: 0 0 1.7em} 
a{color: #F60;font-weight:bold} 
a:hover{color: #F00} 
.tooltip{ 
width: 200px; color:#000; 
font:lighter 11px/1.3 Arial,sans-serif; 
text-decoration:none;text-align:center}.tooltip span.top{padding: 30px 8px 0; 
     background: url(/jscss/demoimg/200905/hovertip.gif) no-repeat top}.tooltip b.bottom{padding:3px 8px 15px;color: #548912; 
     background: url(/jscss/demoimg/200905/hovertip.gif) no-repeat bottom} 
</STYLE>
</head> 
<body>
<DIV id=container>
<P><A title="模板无忧提供精品源码下载、网页特效等。" href=/>请把鼠标放到这里哦！</A></P>
</body>
</html>
</DIV>

所属频道：文本链接特效/更新时间：2012-12-12

[收藏][报错][返回列表]

很漂亮的JS+CSS链接提示_文本链接特效

文本链接特效Rss订阅特效代码搜索

文本链接特效推荐

猜你也喜欢看这些