js 悬浮框菜单的实现代码

菜单的悬浮框，代码分享。
1，js代码部分

<script>
//来访好友的悬浮层
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();
}
</script>

 
2，悬浮层的CSS代码