介绍

应用场景

鼠标悬停在不同用户头像上后（除自己的用户头像），显示带有“关注” or “私信” 按钮的详细信息卡片，根据当前登录用户与头像用户之前的关系显示不同类型按钮，支持边缘检测。效果如下：

使用方法

参照范例代码，在需要调用个人名片区域范围的外层父级 DOM 上添加 .js-usercard-box类名，并在内部触发效果的用户头像 <img> 元素上添加 .js-usercard-dialog的类名，以及属性 data-userid="用户ID"来调用用户名片显示。

ps:所绑定的使用区域范围外层父级 DOM 不能是异步添加的（JS动态添加），要确保页面初始化时就渲染在 DOM Tree 中。

demo1：多用户头像调用

<div class="js-usercard-box">   
  <a href="javascript:void(0);">
    <img class="js-usercard-dialog" src="用户1" width="40" height="40" data-userid="1">
  </a>
  <a href="javascript:void(0);">
    <img class="js-usercard-dialog" src="用户2" width="40" height="40" data-userid="2">
  </a>
  <a  href="javascript:void(0);">
    <img class="js-usercard-dialog" src="用户3" width="40" height="40" data-userid="3">
  </a>
</div>    
                

demo2：单用户头像调用

<div class="js-usercard-box">   
  <a href="javascript:void(0);">
    <img class="js-usercard-dialog" src="用户1" width="40" height="40" data-userid="1">
  </a>
</div>