用javascript实现的tip效果

 

用javascript实现的tip效果

原文地址

document.body.onmousemove = quickalt;
document.body.onmouseover = getalt;
document.body.onmouseout = restorealt;
var  tempalt = '';

function  getalt() {
    if(event.srcElement.title && (event.srcElement.title!='' || (event.srcElement.title=='' && tempalt!=''))){
        altlayer.style.left=event.x;
        altlayer.style.top=event.y+20;
        altlayer.style.display='';
        tempalt=event.srcElement.title;
        tempbg=event.srcElement.altbg;
        tempcolor=event.srcElement.altcolor;
        tempborder=event.srcElement.altborder;
        event.srcElement.title='';
        altlayer.innerHTML=tempalt;
        if (typeof(tempbg)!="undefined"){altlayer.style.background=tempbg}else{altlayer.style.background="infobackground"}
        if (typeof(tempcolor)!="undefined"){altlayer.style.color=tempcolor}else{altlayer.style.color=tempcolor="infotext"}
        if (typeof(tempborder)!="undefined"){altlayer.style.border='1px solid '+tempborder;}else{altlayer.style.border='1px solid #000000';}
    }
}
function  quickalt() {
    if(altlayer.style.display==''){
        altlayer.style.left=event.x;
        altlayer.style.top=event.y+10;
    }
}
function  restorealt() {
    event.srcElement.title=tempalt;
    tempalt='';
    altlayer.style.display='none';
}

这个得加在</body>结束标签的前面

< body >
< span  title ="不错啊" > 默认效果 </ span >

< div  style ="display:none;border:1px solid #000000;background-color:#FFFFCC;font-size:12px;position:absolute;padding:2;"  id =altlayer ></ div >
<!--注意这个引入必须在下面-->
<script type="text/javascript" src="../js/tip.js"></script>
</ body >

这里面的效果层就是这个div.
在想要应用 tip的文字上面加个<span></span>标签即可