标签：
CSS顶部固定功能，有空的时候研究了一下CSS的定位功能，做了这个大家熟悉的顶部固定功能，鼠标移上去顶部会消失，并可判断浏览器是否支持audio元素！顶部元素在时间控制下也可自动消失。
<!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>CSS+JS实现的div层定位功能和自动消失丨Daniel wellington官网</title> </head> <style type="text/css"> /*<![CDATA[*/ body {margin:0; padding:0 10px 0 10px; border:0; height:100%; overflow:auto;} #menu {right:0; top:39px; width:100%; position:fixed; padding:10px; text-align:center; font-weight:bold; background:#ccc;} #menubottom {right:0; bottom:10px; width:100%; position:fixed; padding:10px; text-align:center; font-weight:bold; background:#ccc;} * html #menu {position:absolute; right:16px; top:0;} * html #menubottom {position:absolute; right:16px; bottom:0;} html {overflow:auto !important; overflow:hidden;} #menu2{ top:0;width:100%; position:fixed; padding:10px; text-align:center; font-weight:bold; background:#ccc;} /*]]>*/ </style> <script type="text/javascript"> function nosee(){ var _menu = document.getElementById("menu"); _menu.style.height = ‘100‘; _menu.style.display =‘none‘; } function autonosee(){ var _menubottom = document.getElementById("menubottom"); var _menu2 = document.getElementById("menu2"); var _menu = document.getElementById("menu"); _menubottom.style.display =‘none‘; _menu2.style.display =‘none‘; _menu2.style.overflow = ‘hidden‘; _menu.style.top=‘0‘; } var ss=window.setInterval(function(){autonosee();},3000); </script> <body> <div id=‘menu2‘><font color=black>本特效由 <a target="_blank" href="http://www.qhgzgw.com" target="_blank">Daniel wellington</a>丨收集于互联网，只为兴趣与学习交流，不作商业用途。</font></div> <div id="menu" onclick="nosee();">我顶部固定啦- 点击我后消失不见</div> <input type="text" x-webkit-speech x-webkit-grammar="builtin:translate" /> <audio preload="auto"> <source src="baby-marry.mp3"></source> <source src="baby-marry.ogg"></source> <p>您的浏览器不支持<code>audio</code>元素！</p> <br><br><hr> </audio> <div style=" height:1000px;"> </div> <div id="menubottom">我底部固定啦-过3秒钟之后我就不出现了</div> </body> </html>
标签：
原文地址：http://www.cnblogs.com/youtianxia/p/4740983.html
