如何制作弹出层

就想csdn回复的帖子一样，在鼠标移到每个回复者的头像上时会弹出一个层，上面显示一些信息？弹出层很好做，但如何定位才能使层始终出现在头像的旁边？
请各位高手指点一下或者给个例子，不胜感激！

解决方案 »

  1.   

    刚做了一尝试，代码如下，希望能给楼主一点启发：<!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>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <style type="text/css">
         .divArr{
    width:100px;
    height:100px;
    background:#CCC;
    margin:20px;
    }
    #divShow{
    width:200px;
    height:200px;
    background:#999;
    position:absolute;
    display:none;
    }
        </style>
    <script type="text/javascript">
         function show(event){
    var evt = event || window.event;
    var divShow = document.getElementById('divShow');
    divShow.style.top = evt.clientY + 10 + "px";
    divShow.style.left = evt.clientX + 10 + "px";

    divShow.style.display = "block";
    }
    function move(event){
    show(event);
    }
    function hidden(){
    var divShow = document.getElementById('divShow');
    divShow.style.display = "none";
    }
        </script>
    </head>
    <body>
    <div class="divArr" id="div1" onmouseover="show(event)" onmousemove="move(event)" onmouseout="hidden()">这是第一个DIV</div>
        <div class="divArr" id="div1" onmouseover="show(event)" onmousemove="move(event)" onmouseout="hidden()">这是第二个DIV</div>
        <div class="divArr" id="div1" onmouseover="show(event)" onmousemove="move(event)" onmouseout="hidden()">这是第三个DIV</div>
        <div id="divShow">这是浮动的DIV</div>
    </body>
    </html>
      

  2.   

    关键你是要获得当前鼠标移动的位置，在鼠标移动到图像上时则获取该鼠标的位置，并弹出一个div，让这个div的left和top等于你鼠标停留的那个位置
      

  3.   

    谢谢 muheye ，你的代码我看了，很好，但有一点问题，当我的鼠标移动到其中一个div上时，在这个div的左边 弹出层，这个弹出层是固定的，不随鼠标移动。JS很弱，不知如何修改你的代码
      

  4.   

    http://topic.csdn.net/u/20100223/17/edb27cb3-24ff-461d-9cff-eb8b8816b6bf.html
      

  5.   

    最实用的方法：给你那个头像上加个title属性不就可以了
      

  6.   

    <!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>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
        <style type="text/css">
            .divArr{
                width:100px;
                height:100px;
                background:#CCC;
                margin:20px;
            }
            #divShow{
                width:200px;
                height:200px;
                background:#999;
                position:absolute;
                display:none;
            }
        </style>
        <script type="text/javascript">
            function show(mydiv){
                var divShow = document.getElementById('divShow');
                divShow.style.top = mydiv.offsetTop + 50 + "px";
                divShow.style.left = mydiv.offsetLeft + 50 + "px";
                
                divShow.style.display = "block";
            }        function hidden(){
                var divShow = document.getElementById('divShow');
                divShow.style.display = "none";
            }
        </script>
    </head>
    <body>
        <div class="divArr" id="div1" onmouseover="show(this)" onmouseout="hidden()">这是第一个DIV</div>
        <div class="divArr" id="div1" onmouseover="show(this)" onmouseout="hidden()">这是第二个DIV</div>
        <div class="divArr" id="div1" onmouseover="show(this)" onmouseout="hidden()">这是第三个DIV</div>
        <div id="divShow">这是浮动的DIV</div>
    </body>
    </html>
      

  7.   


    这个我用过，它默认的是click事件，改成mouseover 事件之后不好使，所以来这儿求教了
      

  8.   

    谢谢 muheye，谢谢 yhtapmys，在你们的基础上载略加修改就是我要的效果了，感谢所有回帖的兄弟姐妹
      

  9.   

    ====1、将以下的代码加入到HEML的<head></head>之间：<!-- 以下代码是设定smile的代码 -->
    <script LANGUAGE="JavaScript">
    var newtop=0
    var newleft=0
    if (navigator.appName == "Netscape") {
    layerStyleRef="layer.";
    layerRef="document.layers";
    styleSwitch="";
    }
    else
    {
    layerStyleRef="layer.style.";
    layerRef="document.all";
    styleSwitch=".style";
    }
    function doMouseMove() {
    layerName = 'iit'
    eval('var curElement='+layerRef+'["'+layerName+'"]')
    eval(layerRef+'["'+layerName+'"]'+styleSwitch+'.visibility="hidden"')
    eval('curElement'+styleSwitch+'.visibility="visible"')
    eval('newleft=document.body.clientWidth-curElement'+styleSwitch+'.pixelWidth')
    eval('newtop=document.body.clientHeight-curElement'+styleSwitch+'.pixelHeight')
    eval('height=curElement'+styleSwitch+'.height')
    eval('width=curElement'+styleSwitch+'.width')
    width=parseInt(width)
    height=parseInt(height)
    if (event.clientX > (document.body.clientWidth - 5 - width))
    {
    newleft=document.body.clientWidth + document.body.scrollLeft - 5 - width
    }
    else
    {
    newleft=document.body.scrollLeft + event.clientX
    }
    eval('curElement'+styleSwitch+'.pixelLeft=newleft')
    if (event.clientY > (document.body.clientHeight - 5 - height))
    {
    newtop=document.body.clientHeight + document.body.scrollTop - 5 - height
    }
    else
    {
    newtop=document.body.scrollTop + event.clientY
    }
    eval('curElement'+styleSwitch+'.pixelTop=newtop')
    }
    document.onmousemove = doMouseMove;
    </script>====2、将以下代码加入到HEML的<body></body>之间：<!-- 以下代码是设定此页的鼠标样式代码 -->
    <script language="javascript">
    if (navigator.appName == "Netscape") {
    }
    else
    {
    document.write('<div ID=OuterDiv>')
    document.write('<img ID=iit src="想要显示的图片.gif" STYLE="position:absolute;TOP:5pt;LEFT:5pt;Z-INDEX:10;visibility:hidden;">')
    document.write('</div>')
    }
    </script>