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>
时间： 2024-09-30 14:17:37