日期:2014-05-16  浏览次数:20728 次

csdn论坛头像效果
我们在看贴的时候,鼠标移动到头像上会弹出层,提示会员信息。层会有一个箭头指向头像。这种效果怎么做啊?谁有这方面的资料,麻烦提示一下,谢谢!!!
------解决方案--------------------
本帖最后由 net_lover 于 2011-09-10 09:17:03 编辑
其实就是一个写好的层,鼠标移动过来显示层,箭头就是图片。你查看源代码就可以看到了。
csdn的代码
function showUserCard(sender, username) {
    if (!window.loaded) return; // 未加载
    if (!currentUserCard) {
        //if (!panelTopicAdmin) return; 
        currentUserCard = new CsdnUserCard(); //*/
    }
    var point = absolutePoint(sender);
    currentUserCard.owner = sender;
    currentUserCard.show(point.x + 65, point.y, username, sender.src);
    currentUserCard.mouseover = function(e) {
        var element = typeof event != "undefined" ? event.srcElement : e.target;
        var hotCard = false;
        while (element) {
            hotCard = element == currentUserCard.owner 
------解决方案--------------------
 element == currentUserCard.div_card;
            if (hotCard) break;
            element = element.parentNode;
        }
        if (!hotCard) {
            removeEventHandler(document, "mouseover", currentUserCard.mouseover);
            currentUserCard.close();
        }
    }
    addEventHandler(document, "mouseover", currentUserCard.mouseover);
}

function absolutePoint(element) {
    var result = {
        x: element.offsetLeft,
        y: element.offsetTop
    };
    element = element.offsetParent;
    while (element) {
        result.x += element.offsetLeft;
        result.y += element.offsetTop;
        element = element.offsetParent;
    }
    return result;
}

function CsdnUserCard() {
    this.hot = false;

    this.div_card = document.createElement("div");
    with(this.div_card.style) {
        borderStyle = "none";
        borderWidth = "0";
        display = "none";
        width = "357px";
  &n