类似CSDN论坛下 用户头像的悬浮窗如何实现
日期：2014-05-16 浏览次数：20573 次
类似CSDN论坛上 用户头像的悬浮窗怎么实现
就是当我把鼠标移动到每个用户的每个人的头像上的时候会出现一个提示的悬浮窗口（如下图所示）
---现在我的需要是：页面上有一个table，当我把鼠标移动到没一个td单元格上的时候，都会弹出一个悬浮窗口，窗口中显示的内容都是动态去后台获取的。由于我对css 很不熟悉，所以在这里求一个完整的示例，有的朋友请提供一份，谢谢了。
------解决方案--------------------
就是当我把鼠标移动到每个用户的每个人的头像上的时候会出现一个提示的悬浮窗口（如下图所示）
---现在我的需要是：页面上有一个table，当我把鼠标移动到没一个td单元格上的时候，都会弹出一个悬浮窗口，窗口中显示的内容都是动态去后台获取的。由于我对css 很不熟悉，所以在这里求一个完整的示例，有的朋友请提供一份，谢谢了。
------解决方案--------------------
- HTML code
<html>
<head>
<script language="javascript" type="text/javascript">
function showUserCard(name){
var taget_obj = document.getElementById(name);
taget_obj.style.display="block";
}
function hideUserCard(name){
var taget_obj = document.getElementById(name);
taget_obj.style.display="none";
}
</script>
</head>
<body>
<div>
<ul>
<li class="center"><a><img onmouseover="showUserCard('fengjssy');" onmouseout="hideUserCard('fengjssy');" src="http://avatar.profile.csdn.net/8/9/1/2_fengjssy.jpg"></a></li>
</ul></div>
<div id="fengjssy" style="border-style: none; border-width: 0px; width: 357px; height: 194px; position: absolute; text-align: left;
left: 150px; top: 10px; display:none;">
<img src="http://avatar.profile.csdn.net/8/9/1/2_fengjssy.jpg">
其他内容
</div>
</body>
</html>
------解决方案--------------------
我胡乱写了个简单的例子，你看看吧。。。记得加上jquery.js再运行噢。。。
- HTML code
<html>
<head>
<title>绝对定位</title>
<style>
#msg {
position: absolute;
width:200px;
height:150px;
border:3px solid blue;
padding: 5px 5px 5px 5px;
display:none;
color:red;
background-color:white;
}
body {
padding-left:100px;
padding-top:100px;
}
td {
width:80px;
height:80px;
}
</style>
<script src="jquery-1.2.6.pack.js"></script>
</head>
<body>
<div>
<table border="1">
<tbody>
<tr>
<td>Im's a TD11111</td>
<td>Im's a TD22222</td>
<td>Im's a TD33333</td>
<td>Im's a TD44444</td>
<td>Im's a TD55555</td>
<td>Im's a TD66666</td>
</tr>
<tr>
<td>Im's a TD77777</td>
<td>Im's a TD88888</td>
<td>Im's a TD99999</td>
<td>Im's a TD00000</td>
<td>Im's a TD12312</td>
<td>Im's a TD45645</td>
</tr>
<tr>
<td>Im's a TD78989</td>
<td>Im's a TD54743</td>
<td>Im's a TD24674</td>
<td>Im's a TD34579</td>
<td>Im's a TD23473</td>
<td>Im's a TDsfhu7</td>
</tr>
<tr>
<td>Im's a TD!</td>
<td>Im's a TD!</td>
<td>Im's a TD!</td>
<td>Im's a TD!</td>
<td>Im's a TD!</td>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
