CSDN 鼠标移入头像效果

我要做一个效果 就是Repeater只绑定一列标题 鼠标移入后再显示相关内容我原先的做法是在绑定每列的时候就把相关数据也绑定到一个DIV中，用一个简单的JS效果控制鼠标移入时那行的DIV的显示和隐藏，但是朋友说我这样做影响访问速度......所以我现在想模仿csdn的这个效果
onmouseover="try{showUserCard(this,'用户ID')}catch(ex){};"但是他这个是不是根据传入值来再访问一次数据库，把相关数据读出来啊？如果是的话 这种方法和我原来的比起来效率会更高么？还有他这个功能是怎么实现的 有没有代码看下？ 跪求各位高人指教~

解决方案 »

  1.   

    用div浮动层，结合ajax取数据显示试下
    浮动层代码
      

  2.   

    DIV 鼠标跟随一个层 
    div 里面数据绑定
      

  3.   

    <div id="d1" style="display:none;">浮动层</div><div id="d2" onmouseover="document.getElementById('d1').style.display='block'">aaaa</div>
      

  4.   

    给你个思路，图片的路径换成你自己的！弹出div的位置自己定<!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>
        <title></title>
        <script language="javascript" type="text/javascript">
            window.onload = function () {
                var img = document.getElementById("checkImg");
                var oDiv = document.getElementById("test");
                img.onmouseover = function () {
                    oDiv.style.display = "block";
                }
                img.onmouseout = function () {
                    oDiv.style.display = "none";
                }
            }
        </script>
        <style type="text/css">
            #test{width:200px;height:200px;border:5px solid #c0c0c0;display:none;}
        </style>
    </head>
    <body>
        <img src="GetCheckImg.ashx" alt="图片验证码" id="checkImg" />
        <div id="test">
            <p>个人信息</p>
        </div>
    </body>
    </html>我也觉得第二种方法好，可以按需加载，你想想，你一次把东西全部加载完，是不是有点浪费，因为用户可能根据不需要去看那么多信息，相反，用户需要哪些信息在去加载它，这样更好些，现在好多效果都是用这种思想去实现的，比如图片廷时加载等
      

  5.   

    其实 我只有两个问题1、我想看看csdn实现这个功能的代码2、我想问实际运用中这两种实现方式哪个更好些？