ThinkBox仿thinkphp头像名片

这是见过最好的js名片插件，鼠标悬浮在头像上，可以看到该用户的详细信息。这个名片特效常常用在微博等SNS网站中。

淘建站为您提供更多_悬浮层/弹出层_悬浮层_头像_名片，在此特别感谢您对我们的支持与厚爱！

下面是两个头像，只要给.avatar加上user_id即可在其右侧出现名片弹出层。

<div class="avatar" user_id="365">
    <a href="http://www.sucaiq.com/" target="blank" title="进入的主页"><img src="images/80_80.gif" /></a>
</div> 
<div class="avatar" user_id="520">
    <a href="http://www.sucaiq.com/js" target="blank" title="进入特效的主页"><img src="http://www.sucaiq.com/Public/images/logo.png" /></a>
</div>

ThinkBox名片插件调用方法

//所有头像绑定ajax获取名片
var ajaxGetCard;
var timeout;

$(document).delegate('.avatar,.ThinkBox-wrapper', 'mouseenter', function(event) {
    //延迟执行鼠标移除事件
    clearTimeout(timeout);
    var ele = $(this);
    var user_id = ele.attr('user_id');
    if (user_id == undefined) {
        return false;
    }

    //获取当前元素的位置,计算弹出框位置
    var ele_l = ele.offset().left;
    var ele_t = ele.offset().top;
    var x = ele_l + 53;
    var y = ele_t;

    //如果已经加载过了，则直接显示
    var card = ele.find('.card-box');
    if (card.html() != null) {
        box = $.ThinkBox(
                card.get(0).outerHTML,
                {
                    'fixed': false,
                    'center': false,
                    'unload': true,
                    'close': '',
                    'dataEle': '',
                    'style': '',
                    'x': x,
                    'y': y,
                    'modal': false
                }
        );
    } else {
        ajaxGetCard = $.get('ajax.php', {'uid': user_id},
        function(data) {
            box = $.ThinkBox(
                    data,
                    {
                        'fixed': false,
                        'onload': true,
                        'center': false,
                        'close': '',
                        'dataEle': '',
                        'style': '',
                        'x': x,
                        'y': y,
                        'modal': false
                    }
            );
            ele.append(data);
            ele.find('.card-box').hide();
        });
    }
    event.stopPropagation();
}).delegate('.avatar,.ThinkBox-wrapper', 'mouseleave', function(event) {
    var user_id = $(this).attr('user_id');
    if (user_id == undefined && $(this).attr('class') != 'ThinkBox-wrapper ThinkBox-') {
        return false;
    }
    ajaxGetCard.abort();
    //延迟执行鼠标移除事件
    timeout = setTimeout("$('.ThinkBox-wrapper').remove();", 30);
    event.stopPropagation();
});