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

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>

实现效果如下：

自己写的代码，欢迎各位大佬指正~

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

弹窗加密代码（可关闭）
<script language="javascript"> <!-- loopy(); function loopy() { var sWord = promp ...
内网通广告弹窗怎么关掉_人民日报批弹窗广告！“弹窗广告”怎么关闭弹窗广告去除拦截方法...
弹窗是一种推广方式.有时候,弹窗广告对人们网上购物.浏览信息有一定帮助,但总体而言,弹窗泛滥就是"扰民"了.当想看的网页被遮挡.想买的商品被隐藏,这种"霸屏"的 ...
CPA广告联盟弹窗广告实现方法？
下边是参考汇成广告联盟做的一个案列:  <HEAD> &l ...
影音播放软件测试初学者,万能影音(全能播放器)暴风影音去弹窗广告的方法(测试可用)...
暴风影音被号称是兼容最多视频音频格式的播放器,使用暴风影音播放器可以打开格式格式视频与音乐文件,因此受到众多用户欢迎,不少操作系统中都内置有该款播放器,不过国内众多播放器软件包含别的软件一般均有令人厌 ...
弹窗广告关不掉退不出你的手机App里暗藏多少“牛皮癣”？
来源:法治日报你的手机App里暗藏多少"牛皮癣"?弹窗广告关不掉退不出捆绑下载安装易卸载难 ● 手机App给人们的生活带来了便利,但随之出现的开屏弹窗广告.强制下载注册以及诱导分 ...
js拦截弹窗广告原理及方法
场景确认: 1.确认服务器和站点程序没有被黑的情况下,网站经常会弹出一些弹窗式的小广告 2.弹窗基本都是页面数据回传到客户端浏览器的过程被电信运营商植入了js外部脚本,该脚本再执行生成iframe广告 ...
[jQuery基础] jQuery动效案例(一) -- 弹窗广告、对联广告
弹窗广告实现效果展示实现步骤第一步(实现静态效果) CSS部分 *{margin: 0;padding: 0; } .ad{position: fixed;right: 0;bottom: 0; ...
Mr.J-- jQuery学习笔记(十七)--动画淡入淡出弹窗广告
之前写过动画的隐藏与显示:Mr.J-- jQuery学习笔记(十四)--动画显示隐藏动画隐藏与显示的一个小demo--对联广告:Mr.J-- jQuery学习笔记(十五)--实现页面的对联广告展开 ...
web前端--弹窗广告实现
web前端–弹窗广告实现很多网站都有许多很烦人的弹窗广告,下面带来的就是一个烦人的弹窗广告效果. 效果图: 注意右下角,那就是我们的弹窗小广告,有点隐蔽. 下面就是代码实现: <!DOCTYP ...

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

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

最新文章

热门文章