CSS+JS实现的div层定位功能和自动消失

最新推荐文章于 2021-06-03 04:35:31 发布

weixin_30492601

最新推荐文章于 2021-06-03 04:35:31 发布

阅读量234

点赞数

文章标签： xhtml javascript ViewUI

原文链接：http://www.cnblogs.com/youtianxia/p/4740983.html

版权

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>