沙滩 的 BLog 上的 tooltip 代码

JS:

PHP:

Array.prototype.inArray=function(value){var i;for(i=0;i<this.length;i++){if(this[i]===value){return true;}}
return false;};function addEvent(obj,type,fn){if(obj.addEventListener){obj.addEventListener(type,fn,false);EventCache.add(obj,type,fn);}
else if(obj.attachEvent){obj["e"+type+fn]=fn;obj[type+fn]=function(){obj["e"+type+fn](window.event);}
obj.attachEvent("on"+type,obj[type+fn]);EventCache.add(obj,type,fn);}
else{obj["on"+type]=obj["e"+type+fn];}}
var EventCache=function(){var listEvents=[];return{listEvents:listEvents,add:function(node,sEventName,fHandler){listEvents.push(arguments);},flush:function(){var i,item;for(i=listEvents.length-1;i>=0;i=i-1){item=listEvents[i];if(item[0].removeEventListener){item[0].removeEventListener(item[1],item[2],item[3]);};if(item[1].substring(0,2)!="on"){item[1]="on"+item[1];};if(item[0].detachEvent){item[0].detachEvent(item[1],item[2]);};item[0][item[1]]=null;};}};}();addEvent(window,'unload',EventCache.flush);var sweetTitles={xCord:0,yCord:0,tipElements:['a','img','acronym'],obj:Object,tip:Object,active:0,init:function(){if(!document.getElementById||!document.createElement||!document.getElementsByTagName){return;}
var i,j;this.tip=document.createElement('div');this.tip.id='toolTip';document.getElementsByTagName('body')[0].appendChild(this.tip);this.tip.style.top='0';this.tip.style.visibility='hidden';var tipLen=this.tipElements.length;for(i=0;i<tipLen;i++){var current=document.getElementsByTagName(this.tipElements[i]);var curLen=current.length;for(j=0;j<curLen;j++){addEvent(current[j],'mouseover',this.tipOver);addEvent(current[j],'mouseout',this.tipOut);if(this.tipElements[i]=='img'){if(current[j].width>472)
{current[j].width=472;}
if(current[j].title){current[j].setAttribute('tip',current[j].title);current[j].removeAttribute('title');}else{current[j].setAttribute('tip',current[j].alt);}
current[j].removeAttribute('alt');}else{current[j].setAttribute('tip',current[j].title);current[j].removeAttribute('title');}}}},updateXY:function(e){if(document.captureEvents){sweetTitles.xCord=e.pageX;sweetTitles.yCord=e.pageY;}else if(window.event.clientX){sweetTitles.xCord=window.event.clientX+document.documentElement.scrollLeft;sweetTitles.yCord=window.event.clientY+document.documentElement.scrollTop;}},tipOut:function(){if(window.tID){clearTimeout(tID);}
if(window.opacityID){clearTimeout(opacityID);}
sweetTitles.tip.style.visibility='hidden';},checkNode:function(){var trueObj=this.obj;if(this.tipElements.inArray(trueObj.nodeName.toLowerCase())){return trueObj;}else{return trueObj.parentNode;}},tipOver:function(e){sweetTitles.obj=this;tID=window.setTimeout("sweetTitles.tipShow()",100);sweetTitles.updateXY(e);},tipShow:function(){var scrX=Number(this.xCord);var scrY=Number(this.yCord);var tp=parseInt(scrY+15);var lt=parseInt(scrX+10);var anch=this.checkNode();var addy='';var access='';if(anch.nodeName.toLowerCase()=='a'){addy=(anch.href.length>25?anch.href.toString().substring(0,25)+"...":anch.href);if(addy=='#')
{addy='';}
var access=(anch.accessKey?' <span>['+anch.accessKey+']</span> ':'');}else if(anch.nodeName.toLowerCase()=='img'){addy=(anch.src.length>25?anch.src.toString().substring(0,25)+"...":anch.src);var access=(anch.accessKey?' <span>['+anch.accessKey+']</span> ':'');}else{addy=anch.firstChild.nodeValue;}
this.tip.innerHTML="<p>"+anch.getAttribute('tip')+"<em>"+access+addy+"</em></p>";if(parseInt(document.documentElement.clientWidth+document.documentElement.scrollLeft)<parseInt(this.tip.offsetWidth+lt)){this.tip.style.left=parseInt(lt-(this.tip.offsetWidth+10))+'px';}else{this.tip.style.left=lt+'px';}
if(parseInt(document.documentElement.clientHeight+document.documentElement.scrollTop)<parseInt(this.tip.offsetHeight+tp)){this.tip.style.top=parseInt(tp-(this.tip.offsetHeight+10))+'px';}else{this.tip.style.top=tp+'px';}
this.tip.style.visibility='visible';this.tip.style.opacity='.1';this.tipFade(10);},tipFade:function(opac){var passed=parseInt(opac);var newOpac=parseInt(passed+20);if(newOpac<80){this.tip.style.opacity='.'+newOpac;this.tip.style.filter="alpha(opacity:"+newOpac+")";opacityID=window.setTimeout("sweetTitles.tipFade('"+newOpac+"')",20);}
else{this.tip.style.opacity='.80';this.tip.style.filter="alpha(opacity:80)";}}};function pageLoader(){sweetTitles.init();}
addEvent(window,'load',pageLoader);

CSS:

HTML:

div#toolTip {position:absolute;z-index:1000;width:220px;background:#F7F5E7;border:1px solid #C68237;text-align:left;padding:5px;min-height:12px;-moz-border-radius:5px;}

div#toolTip p {margin:0;padding:0;color:#8e4d07;font-size:12px;}

div#toolTip p em {display:block;margin-top:3px;color:#c37929;font-style:normal;font-weight:bold;}

div#toolTip p em span {font-weight:bold;color:#8e4d07;}

JS 代码真复杂，看了半天没看懂。

:ft:

 

http://www.quchao.com ，看这里就可以看到效果了。