hovercard头像悬浮卡效果

2019独角兽企业重金招聘Python工程师标准>>>

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

这是poshytip的官网http://vadikom.com/tools/poshy-tip-jquery-plugin-for-stylish-tooltips/

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

  <!-- 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
   });

下面是我实现的效果图

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

转载于:https://my.oschina.net/hellokitty/blog/63845