随笔分类

随笔档案

相册

阅读排行榜

评论排行榜

最新评论

1. Re:留言列表模板HTML代码
1
--让星星跟你道晚安
2. Re:程序员用HTML5制作的爱心树表白动画
@一梦逍遥3 换一个Html...
--剑起苍穹
3. Re:程序员用HTML5制作的爱心树表白动画
@剑起苍穹我也是这样，不知道怎么解决...
--一梦逍遥3
4. Re:Web前端资源汇总
推荐：2021年百度大牛亲授最详细、最全面的前端视频教程：
--码农农农
5. Re:Web前端资源汇总
《JavaScript设计模式》作者张容铭讲解2021年史上最全前端教程免费分享，需要的私聊
--CLH_zza

DIV、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>