ThinkBox仿thinkphp头像名片

收藏

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

0、请不要问“在不在”之类的问题，有问题直接问！1、学生或暂时没有工作的童鞋，整站资源免费下载！2、￥9.9充值终身VIP会员,加我微信，826096331 拉你进VIP群学习！3、程序员加油,技术改变世界。在线 充值

查看演示

加我微信，拉你进VIP群学习：

下载资源 下载积分： 100 积分

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

<div class="avatar" user_id="365">
    <a href="http://www.erdangjiade.com/" target="blank" title="进入素材火的主页"><img src="images/80_80.gif" /></a>
</div> 
<div class="avatar" user_id="520">
    <a href="http://www.erdangjiade.com/js" target="blank" title="进入特效的主页"><img src="http://www.erdangjiade.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();
});