87,910
社区成员
发帖
与我相关
我的任务
分享鼠标悬停头像显示 详细信息层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();
})
})
前台代码
<asp:Repeater ID="RepeaterBlogList" runat="server" OnItemDataBound="RepeaterBlogList_ItemDataBound">
<ItemTemplate>
<li class="li-blog-list" id="li_<%#Eval("ApplicationID").ToString().Replace('-','_').ToLower() %>">
<div class="head_pic">
<asp:HyperLink ID="HyperLinkImage" runat="server">
<div id="tip" style="display: none;"></div> //目前是放到这个div中
<a userid="<%#Eval("blogsender").ToString()%>"> //这个是 鼠标悬停 触发 js事件
<asp:Image ID="ImageHead" runat="server" /></a>
</asp:HyperLink>
</div>
</ItemTemplate>
</asp:Repeater>
目前效果是 把 其他 元素都顶开了
求指导 谢谢...
...全文
请发表友善的回复…
发表回复
marckle 2013-02-03
- 打赏
- 举报
关键点是，弹出的div要能有超级连接并可以点击。
冥江 2012-09-29
- 打赏
- 举报
遇到同样的问题 帮顶
q2104574 2012-06-29
- 打赏
- 举报
<!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>
bigpretty 2012-06-28
- 打赏
- 举报
顶了 这个我不是很懂
似梦飞花 2012-06-28
- 打赏
- 举报
鼠标移上去之后新建一个div，建立位置之后设置它的zIndex比其他的都大 行不行？
