鼠標(biāo)放上去觸發(fā)一個javascript提示框效果代碼

2019-11-21 01:39:34

字體：大中小

供稿：網(wǎng)友

感覺要連接沒什么意義～　又不能點(diǎn)擊
改這里
//s.appendChild(document.createTextNode(t)); 改動
s.innerHTML = t;

<html><script type="text/javascript"> function enableTooltips(id){ var links,i,h; if(!document.getElementById || !document.getElementsByTagName) return; 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("message"); if(t==null || t.length==0) return ; el.removeAttribute("message"); tooltip=CreateEl("span","tooltip"); s=CreateEl("span","top"); //s.appendChild(document.createTextNode(t)); 改動 s.innerHTML = 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 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, span, table{able-layout: fixed; word-wrap:break-word;} 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{ width: 200px; color:#000; font:lighter 11px/1.3 Arial,sans-serif; text-decoration:none;text-align:center} .tooltip span.top{ text-align:left; text-indent:1em; padding: 30px 8px; background: url(/upload/20080817171524699.gif) no-repeat top; } .tooltip b.bottom{padding:3px 8px 15px;color: #548912; background: url(/upload/20080817171524699.gif) no-repeat bottom; } </style> <div   class="iwvjtn8m0"   id="container">  <a href="j111.html" title="我是title" message="這年頭，和尚廟的香火越燒越旺，求保佑、求發(fā)財、求治病,乃至求升官和求升學(xué)的人一窩蜂涌進(jìn)廟門,<a href='#'>簡直要把門檻</a>踏爛.不過這些見菩薩就燒香磕頭的信徒中,到底知道佛門是怎么回事的，恐怕不多。今天，在下也來道個究竟。">狼跋其胡，載躓其尾。公孫碩膚，赤舄幾幾。 找到徹底解脫的辦法就是一個死字，</a> </div> </html>

[Ctrl+A 全選注:如需引入外部Js需刷新才能執(zhí)行]

上一篇：FF下zoom的替代方案單位em

下一篇：js仿淘寶的拼音檢索特效代碼