赞助商

erdangjiade02月14日 10:43楼主
演示效果参考:http://www.erdangjiade.com/js/869.html


下面是两个头像,只要给.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();  });
回复
高级模式
OneThink
OneThink

加入小组

OneThink官方小组,OT是一个开源的内容管理开发框架,旨在帮助开发者节约WEB应用开发的时间投入,以最快的速度开发出高质量和健壮的WEB应用