DIV、CSS和JavaScript实现可隐藏并重现悬浮版块

最新推荐文章于 2025-09-07 20:05:35 发布

weixin_33728268

最新推荐文章于 2025-09-07 20:05:35 发布

阅读量123

点赞数

文章标签： javascript xhtml ViewUI

本文介绍了如何使用HTML、CSS和JavaScript实现网页中广告的悬浮显示与隐藏效果，包括代码实现及具体操作步骤。

如果经常上网，会发现有一些广告悬浮版块，点击隐藏，就只剩下一小块地方留在边缘，当鼠标本移到那小块地方时，广告就又非常积极的重新出现在你的视线。本实例使用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>