js+css跟随鼠标的提示框(tips)
var i,j,c;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++){if(current[j].title==""&¤t[j].href=="")continue;addEvent(current[j],'mouseover',this.tipOver);
addEvent(current[j],'mouseout',this.tipOut);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()",1);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="<span>Link to: </span>"+(anch.href.length>60?anch.href.toString().substring(0,60)+"...":anch.href);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(45);},tipFade:function(opac){var passed=parseInt(opac);var newOpac=parseInt(passed+10);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);function killErrors(){return true;}window.onerror=killErrors;
body div#toolTip{position:absolute;z-index:1000;width:auto;max-width:500px;background:#EDF5FA none repeat scroll 0 50%;border:3px solid #CEF3FF;text-align:left;min-height:1em;-moz-border-radius:5px;font-family:Verdana,Arial,Helvetica,Georgia,Sans-Serif;padding:5px;}
body div#toolTip p{color:#027AC6;font:12px Verdana,Arial,sans-serif;margin:0;padding:0;}
body div#toolTip p em{display:block;margin-top:3px;color:#f60;font-style:normal;font-weight:700;}
body div#toolTip p em span{font-weight:700;color:#690;}
P.S. “喜欢本文?现在就把它分享到 Twitter 或者通过RSS关注本站的更新 ^ O ^ 。” — by edikud @ 09-10-21 - 21:10。
转载请注明:来自eDIKUD'S Blog
Tag(s): tips