首页 新闻 搜索 专区 学院

关于一个QQ空间的一些小知识

0
[待解决问题]

我想请问一下,QQ空间里不是有查看最近联系人吗,当鼠标经过某一个好友的头像是,会自动弹出一个框,里面显示的是一些个人信息,请问怎么实现

scrum master的主页 scrum master | 菜鸟二级 | 园豆:202
提问于:2013-12-29 11:10
< >
分享
所有回答(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>
View Code

实现的一个小demo,QQ空间的肯定不是这部做的,虽然我没有看过。说几点,第一就是初始化数据的时机,我这是在加载页面的时候onload事件触发初始化数据量,其实还可以做成第一次鼠标触发事件的时候才加载数据,懒加载嘛。第二就是显示的数据,到底显示哪些具体信息,我现在显示的数据只有他本来的名字,没有任何附加信息。我猜这些附加信息应该需要使用AJAX技术来获得。如果信息比较少的话,也可以直接加载到页面中隐藏域中,然后使用js去获取值。

还有提问可以附加所属类别,否则就看不到你的问题了。

ThreeTree | 园豆:1490 (小虾三级) | 2013-12-29 18:19
0

用火狐浏览器,找到对应的源码看看,先找到对应的组件然后找到对应的方法,大概可以看个究竟,不过推测先是绑定对应的方法,然后触发事件后调用对应的方法从后台拿到数据在前台展示!(嘿嘿,你自己查查吧!思路仅供参考!)

godtrue | 园豆:242 (菜鸟二级) | 2013-12-29 18:43
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册