类似CSDN论坛上 用户头像的悬浮窗怎么实现

就是当我把鼠标移动到每个用户的每个人的头像上的时候会出现一个提示的悬浮窗口（如下图所示）---现在我的需要是：页面上有一个table，当我把鼠标移动到没一个td单元格上的时候，都会弹出一个悬浮窗口，窗口中显示的内容都是动态去后台获取的。由于我对css 很不熟悉，所以在这里求一个完整的示例，有的朋友请提供一份，谢谢了。

解决方案 »

  1.   

    个人觉得：
    首先会准备好一个容器，放的就是这个悬浮的东西，等你鼠标到移到上面的时候然后                       触发一个函数，传入当时的坐标，方便给刚才那个容器定位到你鼠标这个地方来。里面的内容肯定是通过ajax填充的吧
      

  2.   

    这个需要js，或则用jquery就行了，看数据前台js能否得到，不能再去数据库
      

  3.   

    <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>
      

  4.   

    先弄个隐藏的div，在打开页面的时候从数据库读取数据之后，div内有东西了，只不过是隐藏的，鼠标移动上去或离开时设置display属性，显示或隐藏div。
      

  5.   

    楼上所说的都对，不过楼主记得要对div进行定位噢
    首先DIV要绝对定位：设置position: absolute;
    其次就是要获取你需要显示的位置：
    1。获取到触发onmouseover的事件源坐标(注意滚动条移动的位置)(推荐)。
    2。获取到鼠标的当前坐标(不推荐)。
      

  6.   


    谢谢哈，如果你有jquery的例子的话，还希望你能共享一下.
      

  7.   


    因为这个table中不是每个td单元格都有值、td里面的值都是从数据库里面取出来的，然后也不清楚哪个单元格会有值，所以这悬浮窗的 绝对位置怎么设定呢？？css我懂得太少，可能很短时间内很难自己写出来。
    不知道你能否可以贴个悬浮窗动态位置显示的源码？
      

  8.   

    我胡乱写了个简单的例子，你看看吧记得加上jquery.js再运行噢
    <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>
    <td>Im's a TD!</td>
    </tr>
    </tbody>
    </table>
    </div>

    <div id="msg"></div>
    </body>
    <script>
    $("td").bind('mouseover', function(){
    var str = "<b>当前td的内容：" + $(this).html() + "<br>此处可以用于显示ajax从后台获取数据。</b>";
    var right = $(this).get(0).getBoundingClientRect().right - 40;
    var top = $(this).get(0).getBoundingClientRect().top + 40;
    $("#msg").html(str).css({"left":right + "px","top": top + "px"}).show();
    });

    $("td").bind('mouseout', function(){
    $("#msg").hide();
    });
    </script>
    </html>
      

  9.   

     var str = "<b>当前td的内容：" + $(this).html() + "<br>此处可以用于显示ajax从后台获取数据。</b>";
    ----
    这里我如何加上从后台获取数据的url？
      

  10.   

    楼主，ajax用过吗？使用jquery的ajax吧把异步设置成同步，等到数据取回来再显示该层至于ajax需要访问到后台的url，这个应该自己可以填写吧？需要从td里面获取吗？
    如果需要从td里面获取url或者是某些参数的话，我方法里面的$(this)代表的就是你当前需要显示数据的td啊。你可以直接从td里面取吖