头像

ThinkBox仿thinkphp头像名片

来源:http://www.erdangjiade.com/ 二当家的 2016-06-05 22:50浏览(1768)

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

1、请不要问“在不在”之类的问题,有问题直接问!2、学生或暂时没有工作的童鞋,9.9元整站资源免费下载!3、充值VIP会员,整站资源无任何限制下载!5、程序员加油,交流群:368848856 在线 充值

ThinkBox仿thinkphp头像名片
分类:悬浮层/弹出层 > 悬浮层 难易:初级
查看演示 下载资源: 110

关注微信号获取此Demo视频教程:

下载资源 下载积分: 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();
});
声明:本文为原创文章,如需转载,请注明来源erdangjiade.com并保留原文链接:http://www.erdangjiade.com/js/869.html
评论1
头像

友情提示:垃圾评论一律封号,下载出错或任何技术问题请联系QQ 826096331

  • 头像 沙发
    10-11 16:34
    haochunqiu
    很不错 正是我需要的
1 2