相信大家肯定对腾讯空间和微博的头像悬浮框很感兴趣吧，那么他是怎么实现的呢，开源中国社区的评论也带悬浮卡效果的，其实这些都是js插件来实现的，关键要怎么和我们所学的语言挂钩，其实js和其他语言是分离的，他是属于客户端的，asp.net,php,jsp是属于服务器端，所以js是通用的，下面我介绍头像悬浮卡效果的插件---poshytip，本博客就是用此插件实现的。

这是poshytip的官网

下面解压之后在页面添加对他们的引用

  <!-- jQuery and the Poshy Tip plugin files and css files -->

 <link rel="stylesheet" href="../src/tip-yellowsimple/tip-yellowsimple.css" type="text/css" />//样式很多选一种即可   <script type="text/javascript" src="includes/jquery-1.4.2.min.js"></script>  <script type="text/javascript" src="../src/jquery.poshytip.js"></script>

$("#rooid" + index).poshytip({  //悬浮卡显示的地方

         className: 'tip-yellowsimple',          alignY: 'bottom',          offsetX: -5,          offsetY: 0,

         content: function (updateCallback) { //这个方法很重要，就是悬浮卡要显示的内容，没加载完成会提示一直在加载

                $.post('handler/handler.ashx?action=getid&id=' + array['RoomID'], function(html) {  

                         updateCallback(html);//html为处理页面返回的html格式，要想头像如何显示，html就要以什么格式返回

                });                 return "<div style='height:100px;'><img src='image/ajax-loader.gif' />资料卡加载中...</div>";        },           slide: false    });

下面是我实现的效果图

 当然这是我自己用到的代码，大家可以结合自己的项目来实现。