由于项目的需要，要做一个鼠标悬停显示信息的效果。坦白说，我这个部件我不想使用框架实现，原因是太臃肿了。

在代码库里面找到了些类似的代码（本人为业余的 Javascript 开发人员），但发现都非常的散乱，于是我就尝试重写它们。

先看下 DEMO，打包以后的文件可以在这里下载。

用法很简单，就是在函数参数中选择容器的 id（或者是节点集合），然后代码就会将容器中 a 元素的 title 和链接以泡框的形式弹出。

下面，说下碰到的些值得回味的代码（格式是我重写以后的）。

_addCssFile : function (css_file) {
    var l = document.createElement("link");
    l.setAttribute("type",  "text/css");
    l.setAttribute("rel",   "stylesheet");
    l.setAttribute("href",  css_file);
    l.setAttribute("media", "screen");
    document.getElementsByTagName("head")[0].appendChild(l);
},

用 Javascript 载入外部样式文件，建议在 DOM Ready 以后运行。

_setOpacity: function (oNode) {
    oNode.style.filter       = "alpha(opacity:85)";
    oNode.style.KHTMLOpacity = "0.85";
    oNode.style.MozOpacity   = "0.85";
    oNode.style.opacity      = "0.85";
},

强行设置元素的属性，不像 YUI 这样小心翼翼的先判断后操作，再设置。我等草根的写出来代码，虽然“暴力”，但是实用。

类似的，还有

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;
    }
}

获取当前元素的坐标 -- 写过类似功能的朋友，应该对此段代码很熟悉。

Gracecode.com | Permalink(xHTML) | Trackback | Rss