同志们帮忙看看CSDN上的这个网页效果是怎么实现的？

作者：阿笨猫 | 来源：互联网 | 2023-05-17 21:51

就是鼠标移动到用户头像上时出现一副框框，里面写着这个用户的帐号，昵称，最新帖子等。我想知道怎么实现这个效果，我想大致的思路应该是鼠标划过头像区域时显示了另外一个图片（我已经用资源查看器查过了，那个框框

就是鼠标移动到用户头像上时出现一副框框，里面写着这个用户的帐号，昵称，最新帖子等。我想知道怎么实现这个效果，我想大致的思路应该是鼠标划过头像区域时显示了另外一个图片（我已经用资源查看器查过了，那个框框确实是一副图片），我比较头疼的是这个图片定位是怎么定位的，还有上面的字是怎么定位的。这个是css实现的还是 Javascript实现的（如果不考虑字的来源），最好来段代码，我是新手，还望多多包涵。

10 个解决方案

#1

这划过的时候不是个DIV么，怎么变图片了。整个FIREBUG看看你就知道了。

#2

鼠标移到头像上获取相对的位置
弹出的div 设置offsetLeft,offsetTop值

#3

引用 2 楼 vnetcbd 的回复:

鼠标移到头像上获取相对的位置
弹出的div 设置offsetLeft,offsetTop值

除了这个以外，因为这个弹出层是在其他层之上，所以必须把它的CSS属性里的z-index:1000，设置得高一点！
其实图就是放在

里,

,位置由div来控制,让JS去动态设置DIV的位置，就像2#所说的方法！

#4

这个是需要css+js来实现的，提供一种方案：
在头像img后面插入需要鼠标经过显示的图层，设置该图层display：none；（css,这个图层position需要设置absolute），（当然图层上面的数据，应该是从后台获取的js），鼠标经过时，显示该图层（js）

#5

#6

再详细一点啊，晕，技不如人，唉

#7

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

}

#8

/*//

标题:用户资料

设计:ZswangY37

版权:CSDN.NET

版本:2008103101

//*/



function CsdnUserCard() {

    this.hot = false;



    this.div_card = document.createElement("div");

    with (this.div_card.style) {

        borderStyle = "none";

        borderWidth = "0";

        display = "none";

        width = "357px";

        height = "194px";

        position = "absolute";

        textAlign = "left";

        background = "transparent url(/u/ui/styles/default/topic/bgUserCard.gif) no-repeat scroll 0 0";

        fontFamily = "Verdana,Arial,Helvetica,sans-serif";

    }

    this.div_card.card = this;

    document.body.appendChild(this.div_card);



    this.table_card = document.createElement("table");

    with (this.table_card.style) {

        top = "12px";

        left = "56px";

        position = "relative";

        width = "290px";

    }

    this.table_card.cellSpacing = "0";

    this.table_card.cellPadding = "0";

    this.table_card.border = "0";

    this.div_card.appendChild(this.table_card);



    this.tr_card = this.table_card.insertRow(-1);

    this.td_left = this.tr_card.insertCell(-1);

    with (this.td_left.style) {

        lineHeight = "170%";

        textAlign = "center";

        verticalAlign = "top";

        width = "80px";

    }

    this.a_face = document.createElement("a");

    this.a_face.target = "_blank";

    this.a_face.title = "进入个人空间";

    this.a_face.style.color = "#01359D";

    this.a_face.target = "_blank";

    this.td_left.appendChild(this.a_face);



    this.td_right = this.tr_card.insertCell(-1);

    with (this.td_right.style) {

        lineHeight = "170%";

        textAlign = "left";

        verticalAlign = "top";

    }



    this.img_face = document.createElement("img");

    this.a_face.appendChild(this.img_face);

    with (this.img_face.style) {

        border = "1px solid #5B7790";

        width = "70px";

    }



    this.br_face = document.createElement("br");

    this.td_left.appendChild(this.br_face);



    this.a_space = document.createElement("a");

    this.a_space.innerHTML = "个人空间";

    this.a_space.title = "进入个人空间";

    this.a_space.target = "_blank";

    this.td_left.appendChild(this.a_space);

    with (this.a_space.style) {

        color = "#01359D";

        textDecoration = "none";

        verticalAlign = "middle";

    }



    this.br_space = document.createElement("br");

    this.td_left.appendChild(this.br_space);



    this.a_addFriend = document.createElement("a");

    this.a_addFriend.target = "_blank";

    this.a_addFriend.title = "加为好友";

    this.td_left.appendChild(this.a_addFriend);



    this.img_addFriend = document.createElement("img");

    this.img_addFriend.src = "http://c.csdn.net/bbs/f/i/blank.gif";

    this.a_addFriend.appendChild(this.img_addFriend);



    with (this.img_addFriend.style) {

        background = "transparent url(/u/ui/styles/default/topic/addFriend.gif) no-repeat scroll 0 0";

        height = "17px";

        marginBottom = "5px";

        width = "61px";

        border = "medium none";

    }



    this.br_addFriend = document.createElement("br");

    this.td_left.appendChild(this.br_addFriend);



    /*

    this.a_message = document.createElement("a");

    this.a_message.target = "_blank";

    this.a_message.title = "发消息";

    this.td_left.appendChild(this.a_message);



    this.img_message = document.createElement("img");

    this.img_message.src = "http://c.csdn.net/bbs/f/i/blank.gif";

    this.a_message.appendChild(this.img_message);



    with (this.img_message.style) {

    background = "transparent url(/u/ui/styles/default/topic/sendIMMsg.gif) no-repeat scroll 0 0";

    height = "17px";

    marginBottom = "5px";

    width = "61px";

    border = "medium none";

    }



    this.br_message = document.createElement("br");

    this.td_left.appendChild(this.br_message);

    */



    this.a_blog = document.createElement("a");

    this.a_blog.target = "_blank";

    this.a_blog.title = "浏览博客";

    this.td_left.appendChild(this.a_blog);



    this.img_blog = document.createElement("img");

    this.img_blog.src = "http://c.csdn.net/bbs/f/i/blank.gif";

    this.a_blog.appendChild(this.img_blog);



    with (this.img_blog.style) {

        background = "transparent url(/u/ui/styles/default/topic/goBlog.gif) no-repeat scroll 0 0";

        height = "17px";

        marginBottom = "5px";

        width = "61px";

        border = "medium none";

    }



    this.span_username = document.createElement("span");

    this.span_username.innerHTML = "帐号：";

    this.td_right.appendChild(this.span_username);



    this.a_username = document.createElement("a");

    with (this.a_username.style) {

        color = "#01359D";

        fontStyle = "normal";

        textDecoration = "none";

    }

    this.td_right.appendChild(this.a_username);



    this.br_nickname = document.createElement("br");

    this.td_right.appendChild(this.br_nickname);



    this.span_nickname = document.createElement("span");

    this.span_nickname.innerHTML = "昵称：";

    this.td_right.appendChild(this.span_nickname);



    this.a_nickname = document.createElement("a");

    this.a_nickname.innerHTML = "载入中...";

    with (this.a_nickname.style) {

        color = "#01359D";

        fontStyle = "normal";

        textDecoration = "none";

    }

    this.td_right.appendChild(this.a_nickname);



    this.br_nickname = document.createElement("br");

    this.td_right.appendChild(this.br_nickname);



    this.span_topics = document.createElement("span");

    this.span_topics.innerHTML = "最新帖子：";

    this.td_right.appendChild(this.span_topics);



    this.br_topics = document.createElement("br");

    this.td_right.appendChild(this.br_topics);



    this.ol_topics = document.createElement("ol");

    this.td_right.appendChild(this.ol_topics);



    this.li_topics = {};

    this.a_topics = {};

    for (var i = 0; i < 3; i++) {

        this.li_topics[i] = document.createElement("li");

        this.li_topics[i].style.listStyleType = "decimal";

        this.a_topics[i] = document.createElement("a");

        this.a_topics[i].target = "_blank";

        with (this.a_topics[i].style) {

            color = "#01359D";

            textDecoration = "none";

        }

        this.li_topics[i].appendChild(this.a_topics[i]);

        this.li_topics[i].style.display = "none";

        this.ol_topics.appendChild(this.li_topics[i]);

    }



    this.a_more = document.createElement("a");

    this.a_more.innerHTML = "更多帖子...";

    this.a_more.title = "浏览更多发帖";

    this.a_more.target = "_blank";

    this.td_right.appendChild(this.a_more);



    with (this.a_more.style) {

        marginLeft = "90px";

        color = "#01359D";

        fontStyle = "normal";

        textDecoration = "none";

    }

}



CsdnUserCard.prototype.close = function() {

    this.div_card.style.display = "none";

    if (typeof this.onclose == "function") this.onclose(this);

}



CsdnUserCard.prototype.show = function(left, top, username, face) {

    this.username = username;

    this.a_face.href = "http://hi.csdn.net/" + username;

    this.a_space.href = "http://hi.csdn.net/" + username;

    this.a_addFriend.href = "http://webim.csdn.net/AddFriends/" + username + ".ashx";

    //this.a_message.href = "http://webim.csdn.net/Messages/" + username + ".ashx";

    this.a_blog.href = "http://blog.csdn.net/" + username;

    this.a_username.href = "http://hi.csdn.net/" + username;

    this.a_nickname.href = "http://hi.csdn.net/" + username;

    this.a_more.href = "https://forum.csdn.net/PointForum/Forum/UserTopicList.aspx?user=" + username;

    var userCard = this;

    if (!CsdnUserCard.userInfos[username]) {

        for (var i = 0; i < 3; i++)

            this.li_topics[i].style.display = "none";

        callScript("https://forum.csdn.net/PointForum/UserCard.ashx?user=" + username, function() {

            userCard.doUserChange(username);

        });

    }

    else this.doUserChange(username);

    this.div_card.style.left = left + "px";

    this.div_card.style.top = top + "px";

    this.div_card.style.display = "";

    this.a_username.innerHTML = username;

    this.img_face.src = face;

}



CsdnUserCard.prototype.doUserChange = function(username) {

    if (this.username != username) return;

    if (!CsdnUserCard.userInfos[username]) return;

    this.a_nickname.innerHTML = CsdnUserCard.userInfos[username].nickname;

    for (var i = 0; i < 3; i++) {

        if (CsdnUserCard.userInfos[username].topicList[i]) {

            this.a_topics[i].href = CsdnUserCard.userInfos[username].topicList[i].url;

            var text = CsdnUserCard.userInfos[username].topicList[i].text;

            text = text.replace(/\s \s/g, " ").replace(/
                replace(/>/g, ">").replace(/"ed;/g, '"');

            this.a_topics[i].innerHTML = text.match(/^[\s\S]{1,12}/)[0].replace(/[<>" ]/g, function($0) {

                return { "<": "<", ">": ">", " ": " " } [$0];

            });

            /*this.a_topics[i].innerHTML = text.replace(

            /^(.{12})(.*?)$/, "$1…").replace(/@/g, '＠').replace(/&(?![a-z]+;)/g, '＆');*/

            this.a_topics[i].title = text;



            this.li_topics[i].style.display = "";

        } else this.li_topics[i].style.display = "none";

    }

}



CsdnUserCard.userInfos = {};



function UserCardCallback(json) {

    if (typeof json == "undefined" || !json.username) return;

    CsdnUserCard.userInfos[json.username] = json;

}