菜单js的悬浮框

js代码部分

//来访好友的悬浮层(我的主页、好友主页、陌生人主页)
function GetSuspensioncall(obj) {
    obj = $(obj);
    var imgId = obj.attr("id"), userNum = obj.attr("tit"), userHead = obj.attr("src"), userName = obj.attr("ext"), userCallInTime = obj.attr("ait"), imgLeft = obj.offset().left, imgTop = obj.offset().top + obj.height();

    var bodywidth = $("body").width();
    random++;
    setTimer[imgId] = window.setTimeout(function() {

        var divID = "Box" + random;
        var friendNum = imgId.replace("img", "");
        if (document.getElementById(divID) == null) {
            $("body").append('<div class="followerPreviewBox" id="' + divID + '"></div>');
            $("#" + divID).css({
                left: imgLeft,
                top: imgTop
            }).fadeIn(500);

            $.ajax({
                url: "../user/GetUserInfo.aspx",
                type: "post",
                data: { op: "callinUserInfo", userNum: userNum, friendNum: friendNum },
                dataType: "json",
                async: false,
                success: function(userObj) {
                    var html = '';
                    html += '<table class="mBlogLayer"><tbody>';
                    html += '<tr><td class="top_l"></td><td class="top_c"></td> <td class="top_r"></td></tr><tr>';
                    html += '<td class="mid_l"></td><td class="mid_c"><div class="layerBox"><div class="layerBoxCon1"> ';
                    html += '<div class="name_card"><div class="layerArrow"></div><div><dl class="name clearFix">';
                    html += '<dt><img  src=' + userHead + ' imgtype="head" class="picborder_r"></dt>';
                    html += '<dd class="name_card_con0"> <a href="#" class="namehref">' + GetSubStr(userName, 10) + '</a> <span>(' + GetSubStr(userObj.city, 17) + ')' + userObj.userSex + '</span>';
                    html += '<p class="name_card_con4">来访时间：<strong>' + userCallInTime + '</strong></p>';
                    html += '</dd>  </dl><dl class="info clearFix"><dt>爱好：</dt><dd> <p class="gray6">' + userObj.hobby + '</p></dd></dl></dl><dl class="info clearFix"><dt>签名：</dt><dd> <p class="gray6">' + userObj.recommend + '</p>';
                    html += '</dd></dl>';
                    html += '</div> </div></div></div> </div></td> <td class="mid_r"> </td></tr><tr> <td class="bottom_l"></td>  <td class="bottom_c">';
                    html += '</td><td class="bottom_r"></td></tr></tbody></table>';

                    $("#" + divID).html(html).css("backgroundImage", "none");
                }
            });
        }
        else {
            $("#" + divID).fadeIn(500)
        }
    }, 500);
    function c() {
        var divID = obj.attr("id");
        window.clearTimeout(setTimer[divID]);
        var useNum = "Box" + divID;
        $("#" + useNum).fadeOut(500)
    }
}
//鼠标移除悬浮层不显示
function SuspensionMouseout(obj) {
    obj = $(obj);
    var objID = obj.attr("id");
    window.clearTimeout(setTimer[objID]);
    var imgId = "Box" + random;
    // $("#" + imgId).remove();
    $('.followerPreviewBox').remove();
}

 

 

悬浮层的CSS代码

 

/*悬浮层的样式*/
.followerPreviewBox{ background: url("http://images.digu.com/web_res_v1/images/ico_loading16.gif") no-repeat scroll 5px center #FFFFFF; border-left: 0 solid #000000; margin-top: 5px; position: absolute;text-align: left;width: 310px; z-index: 9999; }
.followerPreviewBox .layerBox{background-color:#F4FFF9;}
.followerPreviewBox .layerBoxCon1{width: 298px;}
.followerPreviewBox .picborder_r{width:50px;height:50px;}
.followerPreviewBox .namehref{text-decoration:none;color:#0082CB;text-decoration: none; color: rgb(0, 130, 203); margin-bottom: 9px;}
.followerPreviewBox .name_card_con4{margin-top:5px;}
.followerPreviewBox .small_icon{margin-top:5px;margin-left:3px; margin-top: 12px;_padding-left:3px}
.followerPreviewBox .man{}
.followerPreviewBox strong{color:#FFAA00;}
.name_card .name dd{ width:210px;}
.name_card .info dd p{ word-wrap: break-word;}
/*end*/

 

未经过测试，仅供参考

感谢:jude_lau