js实现banner广告和插屏广告

最新推荐文章于 2024-09-15 08:00:00 发布

weixin_30443895

最新推荐文章于 2024-09-15 08:00:00 发布

阅读量682

点赞数

原文链接：http://www.cnblogs.com/zhougeBlog/p/6872497.html

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js实现banner和插屏广告</title>
    <style>
        input:first-child{
            margin-top: 80px;
            border: 1px solid #ccc;
        }
        input{
            width: 500px;
            height: 80px;
            border-radius: 50px;
            font-size: 40px;
            font-weight: bold;
            text-align: center;
            line-height: 50px;
            letter-spacing: 2px;
            display: block;
            margin: 20px auto;
            background: #ccc;
            cursor: pointer;
        }
    </style>
    <script>
        function bannerView(){
            var banner=document.getElementsByTagName("div")[0];
            banner.style.display="block";

        }
    </script>
    <script type="text/javascript">
        function advert(config){
        }
        advert.prototype={
            constructor: advert,
            adsBox:function(){
                var that=this;
                     var boxWidth;
                    // 与屏幕大小比较
                    if(this.width>=screen.width){
                        boxWidth="95%";
                    }else{
                        boxWidth=that.width;
                    }
                    var ad=document.createElement("div");
                    ad.setAttribute("style","z-index:1000000;position: fixed;top:0;left:0;");
                    //广告主体内容
                    var html1=`<div class="cover" style="width: 100%;height: 100%;background: rgba(0,0,0,0.3);position: fixed;top: 0;left: 0;"></div>`
                        +`<div id="insertBox" style="position: fixed; width: `+boxWidth+`;height:auto;top: 50%;left: 50%;transform:translate(-50%,-50%);-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);-o-transform:translate(-50%,-50%);z-index:20;">`
                        +`<a href="#" style="display:block;width:100%;height:auto"><img src="https://s3m.mediav.com/galileo/2a74d406010b239591bd7bd442422d3f.png" alt="图片" style="width:100%;height:auto;"></a>`
                        +`<span id="insert_closeBtn" style="position: absolute;cursor:pointer;top: 10px;right: 10px;width: 32px;height: 32px;border-radius: 16px;background: rgba(0,0,0,0.5);color: #FFF;text-align: center;line-height: 26px;font-size:32px;font-family:'MingLiU';">&times;</span>`
                        +`</div>`;
                    ad.innerHTML=html1;
                    document.body.appendChild(ad);
                    var box=document.getElementById("insertBox");
                    var closeBtn=document.getElementById("insert_closeBtn")
                    //删除
                    closeBtn.onclick=function(){
                        document.body.removeChild(ad);
                    }
                },
            // 插屏广告
            interstitialAd:function () {
                console.log(1);
                var that=this;
                var img = new Image();
                img.src = "https://s3m.mediav.com/galileo/2a74d406010b239591bd7bd442422d3f.png";
                if (img.complete) {
                    that.width=img.width;
                    that.height=img.height;
                    that.adsBox();
                } else {
                    // 判断图片加载完成时获取到图片的宽高
                    img.onload = function () {
                        that.width=img.width;
                        that.height=img.height;
                        img.onload = null;
                        that.adsBox();
                    };
                };
                return this;
            },
            // banner广告
            banner:function(){
                // 渲染页面
                var html='<div style="cursor: pointer;z-index: 10000;width: 300px;height: 100px">'
                +'<a href="#" style="display: block;width:100%;height: auto">'
                +'<img src="https://p0.ssl.qhimg.com/t01cc456dbd8c4fdb8d.png" style="width: 300px;height: 100px;" alt="图片信息"></a></div>';
                document.writeln(html); 
            }
        }
    </script>
    <script type="text/javascript">
        function insertAdv(){
            new advert().interstitialAd();  
        }     
    </script>
</head>
<body>
    <input value="插屏广告（点我）" onclick="insertAdv()" type="btn"/>
    <input value="banner广告（点我）" onclick="bannerView()" type="btn"/>
    <!-- banner广告位1 -->
    <div style="display: none;">
    <h3>广告位1</h3>
        <script>
            new advert({
            width:"1000px",
            height:"300px"
            }).banner();  
        </script>
    </div>
</body>
</html>