右下角收缩广告

时间：2017-11-20 13:22:08 阅读：112 评论：0 收藏：0 [点我收藏+]

标签：title zha abs center .com top display name osi

<!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>

技术分享图片

右下角收缩广告

标签：title zha abs center .com top display name osi

原文地址：http://www.cnblogs.com/zhaocom/p/7865460.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行