关于一个QQ空间的一些小知识
0
[待解决问题]
我想请问一下，QQ空间里不是有查看最近联系人吗，当鼠标经过某一个好友的头像是，会自动弹出一个框，里面显示的是一些个人信息，请问怎么实现
所有回答(2)
0
<!DOCTYPE html> <html> <head> <meta content="text/html; charset=utf-8" /> <title>js选项卡</title> <style type="text/css"> #names div.name { float: left; width: 100px; height: 24px; cursor: pointer; position: relative; background: #eee; border: 1px solid black; margin: 10px; text-align: center; line-height: 24px; } .showInfo { background: red; width: 200px; height: 100px; position: absolute; left: 50px; top: 12px; display: none; z-index: 999; } </style> <script type="text/javascript" language="javascript" src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript"> $(function() { $("#names").find("div.name").each(function() { $this = $(this); var name1 = $this.text(); alert(name1); var info = $("<div class='showInfo'>"+name1+"</div>"); $this.append(info); $this.hover(function() { $(this).find("div.showInfo").show(); }, function() { $(this).find("div.showInfo").hide(); }); }); }) </script> </head> <body> <div id="names"> <div class="name">张三</div> <div class="name">李四</div> <div class="name">王五</div> <div class="name">hello</div> <div class="name">lilei</div> </div> </body> </html>
实现的一个小demo，QQ空间的肯定不是这部做的，虽然我没有看过。说几点，第一就是初始化数据的时机，我这是在加载页面的时候onload事件触发初始化数据量，其实还可以做成第一次鼠标触发事件的时候才加载数据，懒加载嘛。第二就是显示的数据，到底显示哪些具体信息，我现在显示的数据只有他本来的名字，没有任何附加信息。我猜这些附加信息应该需要使用AJAX技术来获得。如果信息比较少的话，也可以直接加载到页面中隐藏域中，然后使用js去获取值。
还有提问可以附加所属类别，否则就看不到你的问题了。
0
用火狐浏览器，找到对应的源码看看，先找到对应的组件然后找到对应的方法，大概可以看个究竟，不过推测先是绑定对应的方法，然后触发事件后调用对应的方法从后台拿到数据在前台展示！（嘿嘿，你自己查查吧！思路仅供参考！）
