PHP-Z

前端

鼠标放上去触发一个javascript提示框效果代码

2016-9-4 09:21 发布者: 大熊猫
JavaScript 是一种由Netscape的LiveScript发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如Perl,遗留的速度问题,为客户提供更流畅的浏览效果。


这个提示框里面有链接文字与图片(icon)出现。而且鼠标能移上去点击这个链接的
感觉要连接没什么意义~ 又不能点击 
改这里 
//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> 



 
<a href="j111.html" title="我是title" message="这年头,和尚庙的香火越烧越旺,求保佑、求发财、求治病,乃至求升官和求升学的人一窝蜂涌进庙门,<a href='#'>简直要把门槛</a>踏烂.不过这些见菩萨就烧香磕头的信徒中,到底知道佛门是怎么回事的,恐怕不多。今天,在下也来道个究竟。">狼跋其胡,载踬其尾。公孙硕肤,赤舄几几。 
找到彻底解脱的办法就是一个死字,</a> 
</div> 
</html>

关注微信公众号

top100summit

扫一扫关注微信公众号

PHP-Z_COM