鼠标放图片上显示小窗口的问题？

Question

我想实现像CSDN那样鼠标放头像上显示该用户的信息，小窗口里面有按钮且鼠标可以移动进去点击按钮，请问要怎么实现？最好有例子，先谢谢了，求各位大神帮忙

Answer 1

JQuery的例子

Answer 2

<div id="d1" style="display:none;">小窗口里面的布局什么按钮神马的，需要什么放什么，实时数据和数据库交互获取即可</div>
<img id="d2" onmouseover="document.getElementById('d1').style.display='block'" src="../XX.JPG"></img> 

Answer 3

怎么控制div的位置让每个div显示在相应的头像旁边？

Answer 4

你获取到鼠标的位置就可以啦$("#p1").mouseover(function(e){
  alert(e.pageX+":"+e.pageY);
});

Answer 5

上面用的是jquery的，如果用js的话，先了解下下面的    event.clientX 设置或获取鼠标指针位置相对于窗口客户区域的 x 坐标，其中客户区域不包括窗口自身的控件和滚动条。
    event.clientY 设置或获取鼠标指针位置相对于窗口客户区域的 y 坐标，其中客户区域不包括窗口自身的控件和滚动条。
    event.offsetX 设置或获取鼠标指针位置相对于触发事件的对象的 x 坐标。
    event.offsetY 设置或获取鼠标指针位置相对于触发事件的对象的 y 坐标。
    event.screenX 设置或获取获取鼠标指针位置相对于用户屏幕的 x 坐标。
    event.screenY 设置或获取鼠标指针位置相对于用户屏幕的 y 坐标。
    一般用event.clientX 和event.clientY的比较多！

Answer 6

ExtJS和JQuery都能实现 你可以找找相关的例子

Answer 7

关于这效果的资料搜下大一堆  JQ 最容易 也是最简单实现的
实在不行 你就把CSDN上的效果 扣出来 自己摸索 有问题在提问