方便的美化超链接的js脚本……

预览图：

打包下载：https://files.cnblogs.com/tsorgy/js_tooltip.zip

鼠标移动到连接上出现，移出连接后消失。。源代码：

 

 1/**//*
 2 * Copyright (c) 2008 黑色珊瑚::WebSite1, Reserved.
 3 * 
 4 * Filename:    @(#)js_tooltip.aspx.cs
 5 * Create by:   TsOrgY
 6 * Date:        2008/11/26 15:38:54
 7 * 
 8 * Description: 处理页面上name="tooltip"的<a>标签，加上超链接效果
 9 */

var TIP_PATH="js/";
function $(obj) {return document.getElementById(obj);}
function tip_htmlspecialchars(str)  
{  
    if (str.length === 0) {return "";}
    return str.replace("&","&amp;").replace("<","&lt;").replace(">","&gt;").replace(" ","&nbsp;").replace("\"","&quot;").replace("\\n","<br>");
}
function getToolDivHTML(str) {
    var strs=str.split('$');
    var s='<div style="height:4px;width:174px;background:url(\''+TIP_PATH+'tooltip_top.gif\') no-repeat;"></div>';
    s+='<div id="tip_background" style="width:174px;line-height:16px;font-family:\'微软雅黑\';font-size:12px;background:url(\''+TIP_PATH+'tooltip.gif\') no-repeat;">';
    s+='<div id="tip_title" style="margin:4px 6px 5px 6px;width:158px;height:15px;overflow:hidden;font-weight:bold;">'+tip_htmlspecialchars(strs[0])+'</div>';
    if (strs.length>1) {
        s+='<div id="tip_body" style="margin:8px 14px 5px 14px;width:144px;height:30px;overflow:hidden;">'+tip_htmlspecialchars(strs[1])+'</div>';
    }
    if (strs.length>2) {
        s+='<div id="tip_foot" style="margin:17px 6px 5px 6px;width:160px;height:16px;overflow:hidden;">'+tip_htmlspecialchars(strs[2])+'</div>';
    }
    s+='</div><div style="height:4px;width:174px;background:url(\''+TIP_PATH+'tooltip_bottom.gif\') no-repeat;"></div>';
    return s;
}
function execTooltips() {
    var div_tooltip=$('div_tooltip');
    div_tooltip.style.display='none';
    var tips=document.getElementsByName('tooltip');
    for (var i=0; i<tips.length; i++) {
        tips[i].onmousemove=function() {
            div_tooltip.style.left=event.x+20;
            div_tooltip.style.top=event.y+20;
            if (div_tooltip.style.display!='block') {
                div_tooltip.innerHTML=getToolDivHTML(this.tag);
                div_tooltip.style.display='block';
            }
        };
        tips[i].onmouseout=function() {div_tooltip.style.display='none';};
        tips[i].tag=tips[i].title;
        tips[i].title='';
    }
}
document.writeln('<div id="div_tooltip" style="position:absolute;"></div>');
execTooltips();

 

使用方法很简单，在页面底部，</body>之前加上<script src="js_tooltip.js" type="text/javascript"></script>的引用，然后对要加效果的<a>标签设置name属性，比如：

<a href="#" title="连接1$There's sth. words.\n换行$abcdefg" name="tooltip">Link1 tooltip</a>

js脚本从title属性中读出内容填到div提示层上，共3部分，用$分隔，第一个是标题，第二个是正文内容，第三个是底部文字，可以只要一个或前两个，提示层自动改变大小…………