日期:2014-05-16  浏览次数:20339 次

求一段JS
效果是这样的。比如页面上有很多用户的头像,移上去,弹出一个层,该层的位置就在头像的旁边,里面显示该用户的详细信息。移开就隐藏了。如果还不明白的话,就在你当前浏览的页面,你看到左边的头像没?移上去瞧瞧,就是这种效果。我自己也做了一个,是用onmousemove和onmouseover控制的,但是如果鼠标快速的移开,那个层不会隐藏,需要缓缓的移开,才能够隐藏。搞得很郁闷,希望哪位高人能够贴点源码上来,小弟不胜感激...

------解决方案--------------------
CSDN中用他自己的JavaScript:showUserCard方法,类似的,在该方法中修改显示用户信息的DIV属性:display,以及更改出现的位置,加入一些图片美化下,貌似只用了一个方法onmouseover,LZ试试。
------解决方案--------------------
用onmouseover和onmouseout试试
------解决方案--------------------
如果用jQuery的话更简单,用hover事件就可以轻松解决,可以先看看jQuery API,查查hover的用法,我就是用这种实现鼠标划过背景变色的。
------解决方案--------------------
今天G心情好,发一个你看看,

JScript code

function Description(o, strHtml) {
        var obj = document.getElementById(o + "_temp");
        if (!obj) {
            var a = document.createElement("div");
            with (a.style) {
                background = '#f3f3f3';
                border = '1px solid #ccc';
                fontSize = '12px';
                position = 'absolute';
                lineHeight = "22px";
                left = loc(o, "Left") + 60 + "px";
                
                top = loc(o, "Top") + o.offsetHeight - 22 + "px";
                padding = "1px";
                width = 'auto';
                height = 'auto';
                overflow = 'hidden';
                display = "block";
            }
            a.id = o + '_temp';
            document.body.appendChild(a);
            a.innerHTML = strHtml;
        }
        else {
            obj.style.display = "block";
            obj.innerHTML = strHtml;
        }
        o.onmouseout = function(e) { clear(e, o + "_temp"); }        
    }
    function loc(o, sProp) {
        var i = 0;
        while (o) {
            i += o["offset" + sProp];
            if (o.offsetParent) { if (o.offsetParent.style.position == "absolute") return i; }
            o = o.offsetParent;
        } return i;
    }
function clear(e, popid) { e = window.event || e; var s = e.relatedTarget || e.toElement; var pop = document.getElementById

(popid); if (pop && s) { pop.style.display = (pop == s || s == pop.parentNode || s == s.parentNode) ? "block" : "none"; 

pop.onmouseover = function(e) { this.style.display = "block"; }; pop.onmouseout = function(e) { this.style.display = "none"; 

}; } }

------解决方案--------------------
主要是布局问题,调整一下.不行就给周围的对象加上鼠标进入事件,在里面关闭这个弹出层.
------解决方案--------------------
探讨
效果是这样的。比如页面上有很多用户的头像,移上去,弹出一个层,该层的位置就在头像的旁边,里面显示该用户的详细信息。移开就隐藏了。如果还不明白的话,就在你当前浏览的页面,你看到左边的头像没?移上去瞧瞧,就是这种效果。我自己也做了一个,是用onmousemove和onmouseover控制的,但是如果鼠标快速的移开,那个层不会隐藏,需要缓缓的移开,才能够隐藏。搞得很郁闷,希望哪位高人能够贴点源码上来,……

------解决方案--------------------
我做的和你类似,可能和你的要求有些差距,我的是把鼠标移上去,访问数据库查询数据,然后把查询出来的数据写到一个隐藏的层中,然后在把隐藏的层显示出来.
//得到鼠标的当前位置
var mouseXPoint = event.clientX;
var mouseYPoint = event.clientY;
//给隐藏层赋值
document.getElementById("lbusernamevalue").innerHTML = userinfo.data[0].UserName;
document.getElementById("lbuseraddressvalue").innerHTML = userinfo.data[0].UserAddress;
document.getElementById("lbusermobilevalue").innerHTML = userinfo.data[0].UserMobile;
document.getElementById("lbusersexvalue").innerHTML = userinfo.data[0].UserSex;
document.getElementById("lbuserbirthdayvalue").innerHTML = userinfo.data[0].UserBth;