这是见过最好的js名片插件,鼠标悬浮在头像上,可以看到该用户的详细信息。这个名片特效常常用在微博等SNS网站中。
下面是两个头像,只要给.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();
});
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791