如果經常上網，會發現有一些廣告懸浮版塊，點擊隱藏，就只剩下一小塊地方留在邊緣，當滑鼠本移到那小塊地方時，廣告就又非常積極的重新出現在你的視線。本執行個體使用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>
效果請看瀏覽器右側。
content 內容
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
