鼠标悬停头像显示 详细信息层js控制层的显示位置
目标效果 跟新浪 微博 鼠标悬停头像 显示出资料卡效果一样
$(function () {
//2.绑定鼠标经过事件
$("a[userid]").mouseover(function () {
$.ajax({
url: "../handler/UserInfo.ashx?userid=" + $(this).attr("userid"),
type: "post",
timeout: 30000,
dataType: "json",
success: function (data) {
if (data != null) {
var tipinfo = "<!--vcard_bg--><div class="vcard_bg">" +
"<!--vcard_box--><div class="vcard_box">" +
"<!--v_header--><div class="v_header">" +
"<!--userinfo--><div class="v_user_headimg">" +
"<a href="#"><img src="" + data.params.selfpicture + "" width="50" height="50" border="0" /></a></div>" +
"<div class="v_user_headername">" +
"<p><a href="#">" + data.params.nickname + "</a>" +
data.params.validated == true ?
"<img style="cursor:pointer; margin:5px 0 0 3px;" title="已认证" src="images/vip.gif">" : "" +
"</p><p><em>" + data.params.city + "</em><em>海淀区</em></p>" +
"<div class="v_user_atten">" +
"<ul>" +
"<li class="li_dif">" +
"<a href="#">我关注的</a>" +
"<span class="v_user_num">" + data.params.concerningcount + "</span>" +
"</li>" +
"<li>|</li>" +
"<li>" +
" <a href="#">关注我的</a>" +
"<span class="v_user_num">" + data.params.concernedcount + "</span>" +
"</li>" +
"<li>|</li>" +
"<li>" +
" <a href="#">我的微博</a>" +
"<span class="v_user_num">" + data.params.blogcount + "</span>" +
"</li>" +
" </ul>" +
"</div>" +
"<!--v_header end-->" +
"</div>" +
"<!--userinfo end-->" +
"<div class="cl"></div>" +
"<!--v_info-->" +
"<div class="v_info"><p>知名女作家</p></div>" +
"<!--v_info end-->" +
"<div class="cl"></div>" +
"</div>" +
"<div class="cl"></div>" +
"</div>" +
"<!--vcard_box end-->" +
"<div class="vcard_jt"></div>" +
"</div>" +
"<!--vcard_bg end-->";
$("#tip").html(tipinfo);
$("#tip").show();
}
//data 为返回出来的json对象
//将用户信息写到div中
//设置div的位置在图片上方
}
})
})
//3.绑定鼠标离开事件
$("a[userid]").mouseout(function () {
$(".vcard_bg").hide();
})
})
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
function MM_over(mmObj) {
var mSubObj = mmObj.getElementsByTagName("div")[0];
mSubObj.style.display = "block";
}
function MM_out(mmObj) {
var mSubObj = mmObj.getElementsByTagName("div")[0];
mSubObj.style.display = "none";
}
</script>
</head>
<body>
<div onmouseover="MM_over(this)" onmouseout="MM_out(this)" style="width: 100px; margin: 150px;
position: relative;">
sdfsdf
<div class="test" style="width: 100px; height: 30px;
display: none; background-color: #FEFEE9;">
我是信息
</div>
</div>
</body>
</html>
