我的漫漫程序之旅

专注于JavaWeb开发
随笔 - 39, 文章 - 310, 评论 - 411, 引用 - 0
数据加载中……

用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>标签即可

posted on 2007-12-16 19:55 々上善若水々 阅读(2575) 评论(0)  编辑  收藏 所属分类: JavaScript


只有注册用户登录后才能发表评论。
网站导航: