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

鼠标悬停头像显示 详细信息层js控制层的显示位置
目标效果 跟新浪 微博 鼠标悬停头像 显示出资料卡效果一样

JScript code

   $(function () {
        //2.绑定鼠标经过事件
        $("a[userid]").mouseover(function () {
            $.ajax({
                url: "../handler/UserInfo.ashx?userid=" + $(this).attr("userid"),
                type: "post",
                timeout: 30000,
                dataType: "json",
                success: function (data) {
                    if (data != null) {
                        var tipinfo = "<!--vcard_bg--><div class=\"vcard_bg\">" +
                        "<!--vcard_box--><div class=\"vcard_box\">" +
                        "<!--v_header--><div class=\"v_header\">" +
                        "<!--userinfo--><div class=\"v_user_headimg\">" +
                       "<a href=\"#\"><img src=\"" + data.params.selfpicture + "\" width=\"50\" height=\"50\" border=\"0\" /></a></div>" +
                        "<div class=\"v_user_headername\">" +
"<p><a href=\"#\">" + data.params.nickname + "</a>" +
data.params.validated == true ?
"<img style=\"cursor:pointer; margin:5px 0 0 3px;\" title=\"已认证\" src=\"images/vip.gif\">" : "" +
                "</p><p><em>" + data.params.city + "</em><em>海淀区</em></p>" +
                "<div class=\"v_user_atten\">" +
              "<ul>" +
                "<li class=\"li_dif\">" +
                  "<a href=\"#\">我关注的</a>" +
                   "<span class=\"v_user_num\">" + data.params.concerningcount + "</span>" +
                "</li>" +
                "<li>|</li>" +
                "<li>" +
                 " <a href=\"#\">关注我的</a>" +
                   "<span class=\"v_user_num\">" + data.params.concernedcount + "</span>" +
                "</li>" +
                "<li>|</li>" +
                "<li>" +
                 " <a href=\"#\">我的微博</a>" +
                   "<span class=\"v_user_num\">" + data.params.blogcount + "</span>" +
                "</li>" +
             " </ul>" +
            "</div>" +
            "<!--v_header end-->" +
             "</div>" +
          "<!--userinfo end-->" +
          "<div class=\"cl\"></div>" +
          "<!--v_info-->" +
          "<div class=\"v_info\"><p>知名女作家</p></div>" +
          "<!--v_info end-->" +
          "<div class=\"cl\"></div>" +
          "</div>" +
        "<div class=\"cl\"></div>" +
          "</div>" +
          "<!--vcard_box end-->" +
          "<div class=\"vcard_jt\"></div>" +
          "</div>" +
          "<!--vcard_bg end-->";
                        $("#tip").html(tipinfo);
                        $("#tip").show();
                    }
                    //data 为返