寻求高手指点JS

我现在做个浮动层。就想QQ那样。鼠标放在头像上面动态创建一个层来显示信息。当鼠标移开头像时候这个层消失。
但是鼠标放在头像上面的时候动态创建一个层。把鼠标移动到创建的这个层上面时候创建的这个层要不消失

解决方案 »

  1.   

    层显示的话当鼠标移到头像的时候取的该图片的offsetTop 和offsetLeft
    让层的top=offsetTop,left=offsetLeft;
    显示详细信息的话通过ajax，获取详细信息
      

  2.   

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>无标题页</title>
        <style type="text/css">
            .floatPic
            {
                display: none;
                position: absolute;
                width: 200px;
                height: 100px;
                boder: 1px;
                background: lightblue;
            }
        </style>    <script type="text/javascript">    var fhide=true;    function ShowFloatPic(obj)    {        fhide=false;        var div=document.getElementById("divinfo");        div.innerHTML="";        var itext=obj.firstChild.nodeValue;        var tnode=document.createTextNode(itext,true);        div.appendChild(tnode);        div.style.display="block";        div.style.left=event.clientX+30;        div.style.top=event.clientY;    }    function prepareHide()    {        fhide=true;        setTimeout("tryHide()",500);        //setTimeout(function(){if (fhide){HideFloatPic();}},500);    }    function tryHide()    {        if (fhide)        {            HideFloatPic();        }    }    function HideFloatPic()    {        var div=document.getElementById("divinfo");        div.style.display="none";    }    function cancelHide()    {        fhide=false;    }    </script></head>
    <body style="margin: 0; padding: 0">
        <li><a href="#" onmouseover="ShowFloatPic(this)" onmouseout="prepareHide(this)">黄瓜</a></li>
        <li><a href="#" onmouseover="ShowFloatPic(this)" onmouseout="prepareHide(this)">土豆</a></li>
        <li><a href="#" onmouseover="ShowFloatPic(this)" onmouseout="prepareHide(this)">西瓜</a></li>
        <li><a href="#" onmouseover="ShowFloatPic(this)" onmouseout="prepareHide(this)">西红柿</a></li>
        <div id="divinfo" class="floatPic" onmouseover="cancelHide();" onmouseout="HideFloatPic();">
        </div>
    </body>
    </html>