[转载]Jquery 类似新浪微博，鼠标移到头像，显示用户信息，并且关注或者神马的 - 稀饭里的米 - 博客园

[转载]Jquery 类似新浪微博，鼠标移到头像，显示用户信息，并且关注或者神马的 – 稀饭里的米 – 博客园.

需要如下图，

1、鼠标移动到头像DIV时，Ajax获取数据，并让浮动DIV显示出来。

2、鼠标可以移动到上面浮动的DIV。

3、鼠标移出浮动DIV且移出头像DIV时，浮动DIV消失，

第一步，给DIV添加mouSEOn事件，触发获取数据：这个比较简单，我使用的是通过ajax get：$.get(url, function(data) {。。。。。}

第二步，显示DIV，

if(data=='error'){
alert('用户名片加载失败,请联系管理员!');
}else{
$(wrap_uid).append(data);//外面一层DIV，data本身就是HTML代码，当然也可以再这边先组织出data来
$(uid).show();//浮动窗口的DIV，show函数必须，不然这个新加的DIV是不会自个儿主动出来的！
}

第三步，这是比较头疼的一步了，最开始，是这样的思路，给头像DIV和浮动DIV的外面那层DIV添加一个事件，mouSEOut事件，在事件中将浮动DIV删除

，问题来了，很多时候，用户移动到头像DIV，然后浮动DIV显示出来了，用户就想去操作浮动DIV了，但是中间是分开的！只有一个箭头是和头像 DIV在一起的，也就是说，鼠标从头像DIV移动到浮动DIV时，会有很大概率跑出大的DIV，一旦鼠标进入两个DIV中间的缝隙，mouSEOut事件 就触发了，浮动DIV就木有了，很蛋疼。

最后想了个办法，让移除浮动DIV放到一个setTimeout中，在一定的时间内（0.2s或者0.1s），若用户鼠标移动到浮动的DIV上 时，触发一个clearTimeout事件，把移除浮动DIV定时器给删了！想法挺好，看着也挺简单，但是中间还是有各种BUG，各种失败，最重要的一点 就是，最外面的DIV的mouseout事件需要移除绑定，自己做过实验就会知道为什么了，下面直接贴代码

function load_user_info(uid, login_id) {
    var my_timeout;
    var url = 'xxxxxx';
     console.log(url);
    $.get(url, function(data) {
        console.log(data);
        if(data=='error'){
            alert('用户名片加载失败,请联系管理员!');
        }else{
            $(wrap_id).append(data).mouseout(function() {
                my_timeout = setTimeout(function() {
                    $(float_id).remove();
                }, 200);
                $(wrap_id).unbind('mouseout');
            }).mouseover(function() {
                clearTimeout(my_timeout);
            });
            $(float_id).show().mouseover(function() {
                clearTimeout(my_timeout);
            }).mouseout(function() {
                my_timeout = setTimeout(function() {
                    $(float_id.remove();
                }, 200);
            });
        }
    });
}

稀饭里的米

JQuery 类似新浪微博，鼠标移到头像，显示用户信息，并且关注或者神马的

　　需要如下图，

　　1、鼠标移动到头像DIV时，Ajax获取数据，并让浮动DIV显示出来。

　　2、鼠标可以移动到上面浮动的DIV。

　 3、鼠标移出浮动DIV且移出头像DIV时，浮动DIV消失，

需求效果

　　第一步，给DIV添加mouseon事件，触发获取数据：这个比较简单，我使用的是通过ajax get：$.get(url, function(data) {。。。。。}

　　第二步，显示DIV，　　

if(data==’error’){
alert(‘用户名片加载失败,请联系管理员!’);
}else{
$(wrap_uid).append(data);//外面一层DIV，data本身就是HTML代码，当然也可以再这边先组织出data来
　　$(uid).show();//浮动窗口的DIV，show函数必须，不然这个新加的DIV是不会自个儿主动出来的！
}

　　第三步，这是比较头疼的一步了，最开始，是这样的思路，给头像DIV和浮动DIV的外面那层DIV添加一个事件，mouseout事件，在事件中将浮动DIV删除

，问题来了，很多时候，用户移动到头像DIV，然后浮动DIV显示出来了，用户就想去操作浮动DIV了，但是中间是分开的！只有一个箭头是和头像DIV在一起的，也就是说，鼠标从头像DIV移动到浮动DIV时，会有很大概率跑出大的DIV，一旦鼠标进入两个DIV中间的缝隙，mouseout事件就触发了，浮动DIV就木有了，很蛋疼。

　　最后想了个办法，让移除浮动DIV放到一个setTimeout中，在一定的时间内（0.2s或者0.1s），若用户鼠标移动到浮动的DIV上时，触发一个clearTimeout事件，把移除浮动DIV定时器给删了！想法挺好，看着也挺简单，但是中间还是有各种BUG，各种失败，最重要的一点就是，最外面的DIV的mouseout事件需要移除绑定，自己做过实验就会知道为什么了，下面直接贴代码
按 Ctrl+C 复制代码
按 Ctrl+C 复制代码

　　还是写点清楚吧，也算锻炼下自己的表达能力!首先，鼠标移出外层DIV时，有两种情况，一种是鼠标它真的走了，还有一种是它其实是去浮动DIV了，所以，给他200毫秒时间，时间一到，如果它没到浮动DIV，就认为它真的走了，就删掉浮动DIV，如果到了浮动DIV，就把定时器给删了！浮动DIV依旧显示，然后，从浮动DIV出来，也有两种情况，一种是去头像DIV，一种是鼠标他真的走了，老样子。至于为什么要外层的DIV解除mouseout绑定，是因为当鼠标在浮动DIV移动的时候，实际上鼠标已经移出了外层DIV的范围，当鼠标在浮动DIV上不停滑动时，mouseout事件不断触发，会造成BUG，第一次完全OK，在浮动DIV移动时，不停clearTimeout 后面timeout越来越多，第二次开始timeout就乱了，无法正确删除clearTimeout事件…..还是有点说不清，囧….

感谢@tanshaohua的指点，指出了这段代码的改进之处，就是在用户鼠标移动到头像，显示出浮动框后，鼠标再次移动到头像时，不应该再去获取数据，增加了服务器的压力。最后贴一下改进后的代码，其实就是判断下float_id的DIV是否已经存在，存在了就不进行加载。代码还比较臃肿，先把手头上其他事解决了，再来处理这个问题

var my_timeout;
    if($(float_id).size()>0){
        $(wrap_id).mouseout(function() {
            my_timeout = setTimeout(function() {
                $("float_id).remove();
            }, 200);
            $(wrap_id).unbind('mouseout');
        }).mouseover(function() {
            clearTimeout(my_timeout);
        $(float_id).show().mouseover(function() {
            clearTimeout(my_timeout);
        }).mouseout(function() {
            my_timeout = setTimeout(function() {
                $(float_id).remove();
            }, 200);
        });
    }else{
        var url = 'XXXXXXX';
//         console.log(url);
        $.get(url, function(data) {
//            console.log(data);
            if(data=='error'){
                alert('用户名片加载失败,请联系管理员!');
            }else{
                $(wrap_id).append(data).mouseout(function() {
                    my_timeout = setTimeout(function() {
                        $(float_id).remove();
                    }, 200);
                    $(wrap_id).unbind('mouseout');
                }).mouseover(function() {
                    clearTimeout(my_timeout);
                $(float_id).show().mouseover(function() {
                    clearTimeout(my_timeout);
                }).mouseout(function() {
                    my_timeout = setTimeout(function() {
                        $(float_id).remove();
                    }, 200);
                });
            }
        });
    }