头像

ThinkBox仿thinkphp头像名片【原创

来源:https://www.sucaihuo.com/php/869.html 18***38 2016-06-05 22:50浏览(1627) 收藏

这是见过最好的js名片插件,鼠标悬浮在头像上,可以看到该用户的详细信息。这个名片特效常常用在微博等SNS网站中。
ThinkBox仿thinkphp头像名片
分类:悬浮层/弹出层 > 悬浮层 难易:初级

程序员,你不是一个人;网站开发QQ群:642228541,在线充值,或联系QQ321037704直接充值

查看演示 下载资源: 7 下载资源 下载积分: 250 积分

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

<div class="avatar" user_id="365">
    <a href="http://www.sucaihuo.com/" target="blank" title="进入素材火的主页"><img src="images/80_80.gif" /></a>
</div> 
<div class="avatar" user_id="520">
    <a href="http://www.sucaihuo.com/js" target="blank" title="进入特效的主页"><img src="http://www.sucaihuo.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();
});
声明:本文为原创文章,如需转载,请注明来源sucaihuo.com并保留原文链接:https://www.sucaihuo.com/php/869.html
最新交易
评论12
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 525945990

  • 头像 11楼
    03-27 10:16
    12***98
    头像展示信息。很好!找到了!
  • 头像 10楼
    12-24 13:51
    Mo***-^
    大神,大神,找这东西好久了
  • 头像 9楼
    12-18 08:39
    54***48
    厉害呢啊哈哈哈
  • 头像 8楼
    03-20 09:07
    ja***ck
    大神,大神,找这东西好久了
  • 头像 7楼
    12-05 08:47
    凌***云
    很喜欢,实用的小工能
  • 头像 6楼
    12-02 10:02
    yi***et
    便宜点我下了
  • 头像 5楼
    08-23 10:37
    ui***io
    hinkphp正学着呢
  • 头像 4楼
    08-23 10:04
    14***33
    thinkphp正学着呢
  • 头像 3楼
    08-13 19:06
    dc***n7
    这个可以有~~~
  • 头像 板凳
    06-20 16:48
    59***25
    如果已经加载过了,则直接显示
1 2