菜单的悬浮框，代码分享。
1，js代码部分
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 | <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代码