右下角收缩广告

Posted 2020-10-15 zhaocom个人博客

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了右下角收缩广告相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            *{
                margin:0;
                padding:0;
            }
            #zt{
                width:100%;
                height:2000px;
                overflow: hidden;
                background: yellowgreen;
            }
            #cvv{
                width:400px;
                position: fixed;
                right:0;
                bottom:0;
            }
            .tip img
            {
                width:400px;
                height:280px;
            }        
            #close{
                background:pink;
                width:20px;
                height:20px;
                text-decoration:none;
                text-align: center;
                display:inline-block;
                position: absolute;
                top: 5px;
                right:5px;
                border-radius: 15px;
            }
            #top-list{
                background: pink;
            }
            .hide{
                display: none;
            }
        </style>
        <script>
            window.onload=function(){
                var Ocon = document.getElementById("con");
                var OTop = document.getElementById("top-list");
                var closeBtn = document.getElementById("close");
                
                OTop.onmouseover=function(){
                    OTop.style.display="block";
                    Ocon.className="tip";
                }
                closeBtn.onclick=function(){
                    
                    OTop.style.display="block";
                    Ocon.className="hide";    
                }
            }
        </script>
    </head>
    <body>
        
        <div id="zt">
            <div id="cvv">
            <div id="top-list">
                <h3>我是广告</h3>
                <a href="javascript:;" id="close">×</a>
            </div>
        <div class="tip" id="con">
            <a href="http://www.zhaocom.xyz/"><img src="img/guanggao.png" /></a>
        </div>
        </div>
        </div>
    </body>
</html>

以上是关于右下角收缩广告的主要内容，如果未能解决你的问题，请参考以下文章

jquery实现可展开收缩的首页大图广告展示方式泰山压顶代码js V1.0

求一段广告固定在网页右下角的代码（CSS或JS都行），谢谢!!

bootstrap的侧边导航怎么做成在手机端收缩到右下角的

当活动被破坏但我必须继续执行片段中的代码时该怎么办？

微信小程序代码片段

有道云笔记去除左下角广告