JS实现对联广告和弹窗广告代码，可同时关闭不随屏幕滚动

最新推荐文章于 2024-04-05 00:38:45 发布

telephone05

最新推荐文章于 2024-04-05 00:38:45 发布

阅读量1.7k

点赞数 5

文章标签： javascript html 前端

本文链接：https://blog.csdn.net/telephone05/article/details/127890508

版权

JS代码如下：

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
       <style type="text/css">
               body{
                   margin: 0;
                   padding: 0;
               }

               .web{
                   width: 1000px;
                   height: 1500px;
                   background-color: #CCCCCC;
                   border: #666666 1px solid;
                   margin: 0 auto;

               }
               /*对联广告样式*/
               #ad1,#ad2{
                   position: fixed;
                   top:50px;
                   width:100px;
                   height: 200px;
                   background-image: url(ad1.jpg);

               }
               #ad1{left: 0;}/*靠左*/
               #ad2{right:0 ;}/*靠右*/
               /*弹窗广告样式*/
               #ad3{
                   position: fixed;
                   bottom:0px;/*右下*/
                   right:0px;
                   height:250px ;
                   width:300px ;
                   background-image: url(ad2.jpg);
               }
               /*关闭按钮图片样式*/
               #close,#close1{

                   width: 50px;
                   height:15px ;
                   object-fit: cover;
                   position: absolute;
                   bottom:0;
                   right:0;
                   background-image: url(close.png);
                   background-repeat:no-repeat;
                   background-size:cover;
background-position:center center;
               }

               #close3{

                   width: 50px;
                   height:15px ;
                   object-fit: cover;
                   position: absolute;
                   top:0;
                   right:0;
                   background-image: url(close.png);
                   background-repeat:no-repeat;
                   background-size:cover;
background-position:center center;
               }
           </style>
   </head>
   <body>
       <div id=ad1>
           <div id="close" ></div>
       </div>
       <div class="web"></div>
       <div id=ad2>
           <div id="close1" ></div>
       </div>
       <div id="ad3" style="display:none;"><div id="close3"></div></div>
   </body>
   <script type="text/javascript">
       var close=document.querySelector("#close");
       var close1=document.querySelector("#close1");
       var close3=document.querySelector("#close3");
       var ad1=document.getElementById('ad1');
       var ad2=document.getElementById('ad2');
//       关闭左边
       close.οnclick=function(){
       ad1.style.display="none";
       ad2.style.display="none";

       }
//       关闭右边
       close1.οnclick=function(){
       ad1.style.display="none";
       ad2.style.display="none";


       }
//       关闭弹窗广告
       close3.οnclick=function(){
       var ad3=document.getElementById('ad3');
       ad3.style.display="none";


       }
//1.5s弹出弹窗广告
window.οnlοad=function(){//页面加载事件
       var ad3=setTimeout(function(){
var ad3=document.getElementById('ad3');
ad3.style.display="inline"
},1500)
       }
   </script>
</html>