如何制作鼠标移到按钮上就弹出一无边框窗口？

JS+DIV模拟窗口
GOOGLE搜索有很多相关代码

解决方案 »

  1.   

    onmouseover与onmouseout控制层的显示与隐藏
      

  2.   

    http://hi.baidu.com/onino_info/blog/item/bd76beef32002a13fdfa3cb6.html
    你是要这样的效果么~?
    修改一下就可以了~
      

  3.   

    <html>
    <head>
    <style type="text/css">
    #div1
    {
    position:absolute;
    z-index:10;
    width:100px;
    height:150px;
    background-color:#efefef;
    border-style:solid;
    border-width:1px;
    display:none;
    }
    </style>
    <script type="text/javascript">
    function $(id)
    {
    return document.getElementById(id);
    }; function initialize()
    {
    $("div1").style.top=0;
    $("div1").style.left=0;
    }

    var isShow=false;
    var x;
    var y;
    function show(e)
    {
    if(!isShow)
    {
    if(e)
    {
    x=e.clientX;
    y=e.clientY;
    }
    isShow=true;
    window.setTimeout(function(){doShow(x,y)},1000);
    }
    }
    function doShow(x,y)
    {
    $("div1").style.top=y+"px";
    $("div1").style.left=y+"px";
    $("div1").style.display="block";

    } function hidden()
    {
    window.setTimeout("$('div1').style.display='none';",1000);
    isShow=false;
    }

    </script>
    </head>
    <body onload="initialize()">
    <a onmousemove="show(event)" onmouseout="hidden()" href="#" id="a1">This is test</a>
    <div onmousemove="show()" onmouseout="hidden()" id="div1">
    <ul>
    <li>asdfsaasf</li>
    <li>asdfsad fsadfasf</li>
    <li>asdfsad fsaaddfasf</li>
    <li>asdfsad fsasf</li>
    <li>asad fsadfasf</li>
    </ul>
    </div>
    </body>
    </html>
      

  4.   


    <html>
    <head>
    <style type="text/css">
    #div1
    {
    position:absolute;
    z-index:10;
    width:100px;
    height:150px;
    background-color:#efefef;
    border-style:solid;
    border-width:1px;
    display:none;
    }
    </style>
    <script type="text/javascript">
    function $(id)
    {
    return document.getElementById(id);
    }; function initialize()
    {
    $("div1").style.top=0;
    $("div1").style.left=0;
    }

    var isShow=false;
    var x;
    var y;
    function show(e)
    {
    if(!isShow)
    {
    if(e)
    {
    x=e.clientX;
    y=e.clientY;
    }
    isShow=true;
    window.setTimeout(function(){doShow(x,y)},1000);
    }
    }
    function doShow(x,y)
    {
    $("div1").style.top=y+"px";
    $("div1").style.left=y+"px";
    $("div1").style.display="block";

    } function hidden()
    {
    window.setTimeout("$('div1').style.display='none';",1000);
    isShow=false;
    }

    </script>
    </head>
    <body onload="initialize()">
    <a onmousemove="show(event)" onmouseout="hidden()" href="#" id="a1">This is test</a>
    <div onmousemove="show()" onmouseout="hidden()" id="div1">
    <ul>
    <li>asdfsaasf</li>
    <li>asdfsad fsadfasf</li>
    <li>asdfsad fsaaddfasf</li>
    <li>asdfsad fsasf</li>
    <li>asad fsadfasf</li>
    </ul>
    </div>
    </body>
    </html>sorry，上面那个没按格式发。-_-~