就像腾讯QQ那样,你用鼠标指着QQ头像,就会弹出一个资料框。
请问怎么实现呀?
------解决方案--------------------
首先 得有一个 Dialog 插件
推荐这个
http://www.planeart.cn/demo/artDialog/index.html
其中follow可以让对话框显示在指定的dom位置,
当mouseover在头像上时,就用follow来显示,其content就显示资料。
当然不使用插件,就需要自己写了,楼主参考下
- HTML code
<!DOCTYPE HTML> <html> <head> <meta charset="gb2312" /> <title></title> <style> .wrap { position:relative; } .inner { display:none; position:absolute; top:30px; left:100px; width:100px; height:100px; border:1px solid #000; background:#fff; } </style> </head> <body> <div class="wrap"> <img src="http://avatar.profile.csdn.net/0/D/B/2_tan_yixiu.jpg" /> <div class="inner"> 内容 </div> </div> <script> var $ = function(id){ return document.getElementById(id); }; var $t = function(tag, cot){ cot = cot || document; return cot.getElementsByTagName(tag); }; $t('img')[0].onmouseover = function(){ $t('div', this.parentNode)[0].style.display = 'block'; } $t('img')[0].onmouseout = function(){ $t('div', this.parentNode)[0].style.display = 'none'; } </script> </body> </html>
------解决方案--------------------
那个是 jquery tooltip 插件
http://www.cnblogs.com/ywqu/archive/2010/01/31/1660597.html