[提问交流]ThinkBox仿thinkphp头像名片

erdangjiade2017-02-14楼主
演示效果参考:http://www.erdangjiade.com/js/869.html
下面是两个头像,只要给.avatar加上user_id即可在其右侧出现名片弹出层。
下面是两个头像,只要给.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(); });