[转载]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);
                });
            }
        });
    }
赞(0) 打赏
分享到: 更多 (0)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏