如果经常上网，会发现有一些广告悬浮版块，点击隐藏，就只剩下一小块地方留在边缘，当鼠标本移到那小块地方时，广告就又非常积极的重新出现在你的视线。本实例使用DIV、CSS和JavaScript，实现了这个效果，在多种浏览器下测试通过。
首先看一下效果图，该图是DIV版块悬浮在浏览器左边的效果：
下图是DIV版块隐藏后只留下一个重现箭头的效果。
废话少说，直接放代码：
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>DIV、CSS和JavaScript实现可隐藏并重现悬浮版块 - 计划 - 博客园</title> <meta name="description" content="DIV、CSS和JavaScript实现可隐藏并重现悬浮版块。 jihua.cnblogs.com" /> </head> <body> <div id="jihuaFrame" style="width:100px; border:1px solid #666;z-index:3;position:absolute; top:300px;right:1px;"> <div id="jihuaContent"> content 内容<br /> content 内容<br /> content 内容<br /> content 内容<br />content 内容<br />content 内容<br />content 内容<br />content 内容<br />content 内容<br /> content <a href="http://jihua.cnblogs.com" target="_blank" style="text-decoration:none;color:Black;">计划</a> </div> <div onmouseover="javascript:JihuaShowObj('jihuaFrame','jihuaContent')"><a href="javascript:JihuaHideObj('jihuaFrame','jihuaContent')" style="text-decoration:none;color:Blue;"><—></a></div> </div> <script language="javascript" type="text/javascript"> function JihuaHideObj(frameid,contentid){ var theobj = document.getElementById(frameid); document.getElementById(contentid).style.display = 'none'; theobj.style.right = (12 - parseInt(theobj.style.width)) + "px"; //记得px jihua.cnblogs.com } function JihuaShowObj(frameid, contentid) { var theContentObj = document.getElementById(contentid); if (theContentObj.style.display == 'none') { theContentObj.style.display = 'block'; document.getElementById(frameid).style.right = '1px'; //记得px jihua.cnblogs.com } } </script> </body> </html>
效果请看浏览器右侧。
