关于层隐藏的问题

我的页面是播放实时视频的，我想给一个层来设置一些功能，如果层显示出来太难看，就是感觉不好，我想像某些网页那样，漂浮一个按钮形式的东西在页面的右上角，当鼠标放在那个像按钮一样东西的时候就将那个层显示出来设置功能，设置完后又回到原来的样子，我从来没有做过像这样的，还请各位给我一个例子看看，谢谢您们，如果有源代码更好，呵呵，谢谢各位了！谢谢！

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

是这样效果吗？<!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>
    <title>Untitled Page</title>
</head>
<body>
    <div style="height: 1000px">
    </div>
    <img id="imgico" onclick="javascript:DoSearch();" style="position: absolute" src="http://www.baidu.com/img/baidu_logo.gif" />
    <div id="divSearch" style="width: 400px; height: 300px; border: solid 1px red; position: absolute;
        display: none">
    </div>
</body>
</html><script type="text/javascript">


    function $(id){return document.getElementById(id);}


    function ScrollImg(id)
    {
        var img = $(id);
        img.style.top = (document.documentElement.scrollTop+(document.documentElement.clientHeight -img.offsetHeight)/2)+"px";
    }

   function DoSearch()
   {
        var div = $("divSearch");
        if(div.style.display == "none")
        {
            div.style.display = "";
            div.style.left = (document.documentElement.clientWidth-div.offsetWidth)/2+"px";
            ScrollImg("divSearch");
        } else
       {
              div.style.display = "none";
       }
   }



    $("imgico").style.left = (document.documentElement.clientWidth - $("imgico").offsetWidth) +"px";
    ScrollImg("imgico");
    window.onscroll=function()
   {
        ScrollImg("imgico");
        ScrollImg("divSearch");
   }
</script>
哦这样的啊
首先定义一个div  display=none
鼠标移动事件
当鼠标移动到你呈现的那个对象上是触发事件
事件里面写入
div  display=block；
div.top=
div。left=
在onmouseover事件和onmousedown事件里写展示隐藏div。
我给个CSS的例子吧，你研究下。原理就是利用:hover操作CSS改变元素的长、宽。<style type="text/css">
.menu {position:absolute; z-index:100; margin-top:60px;margin-left:0px;}.menu ul {padding:0; margin:0; list-style-type: none; height:auto;}.menu ul li {width:35px; text-align:left;}
.menu ul li a,
.menu ul li a:visited {display:block; text-decoration:none;
width:15px; padding:10px; background:transparent url(../img/tab1.gif) top right;
height:80px; text-align:center; border-left:1px solid #000;}table {margin:0; padding:0; border:1px black solid; border-collapse:collapse;font-size:1em;}.menu ul li ul {visibility:hidden; position:absolute; width:100px; top:0; left:0;}.menu ul li:hover {position:relative;}
.menu ul li:hover a {padding-left:110px;}.menu ul li a:hover {padding-left:111px; position:relative; z-index:200; border-left:0;}.menu ul li:hover ul,.menu ul li a:hover ul {visibility:visible; z-index:300;}.menu ul li:hover ul li a,
.menu ul li a:hover ul li a {display:block; background:#d8e2e2 url(../img/fade.gif);
color:#888; text-align:center; height:19px; padding: 5px 0px 3px 0px; border:0px solid #000;
  border-width:1px 1px 0px 1px; width:100px;}.menu ul li:hover ul li a.last,
.menu ul li a:hover ul li a.last {border-bottom:1px solid #000;}.menu ul li:hover ul li a:hover,
.menu ul li a:hover ul li a:hover {background:#e8f2f2; color:#000;}</style>
<div class="menu">
<ul>
<li><a href="./center.jsp">用户＠管理</a>
<table><tr><td>
<ul>
<li><a href="./usercenter.jsp" title="用户数据">用户数据</a></li>
<li><a href="./useradd.jsp" title="添加用户">添加用户</a></li>
<li><a href="./useredit.jsp" title="编辑用户">编辑用户</a></li>
<li><a class="last" href="./center.jsp"></a></li>
</ul>
</td></tr></table>

</li>
<li><a href="./center.jsp">图书＠管理</a>
<table><tr><td>
<ul>
<li><a href="./bookcenter.jsp" title="图书数据">图书数据</a></li>
<li><a href="./bookadd.jsp" title="添加图书">添加图书</a></li>
<li><a href="./bookedit.jsp" title="编辑图书">编辑图书</a></li>
<li><a class="last"  href="./center.jsp"></a></li>
</ul>
</td></tr></table>

</li> <li><a href="./center.jsp">其他＠管理</a>
<table><tr><td>
<ul>
<li><a href="./formcenter.jsp" title="订单数据管理">订单数据管理</a></li>
<li><a href="./booktype.jsp" title="图书种类管理">图书种类管理</a></li>
<li><a  href="./center.jsp"></a></li>
<li><a class="last"  href="./center.jsp"></a></li>
</ul>
</td></tr></table>

</li>
</ul></div>