今年双11红包弹窗代码分享![首访弹窗广告]

相信很多小伙伴们对淘宝客和淘宝联盟并不是很陌生吧,在今年的双十一淘宝联盟平台推出一大批优惠福利其中有一项超级红包淘宝天猫主会场推广连接在10月20号之后活动已经正式发放了。对于一些有自己网站推广的朋友可以尝试下弹窗广告的功能,下面就和大家分享下我写的代码吧!

TIM截图20181026114840.png

html代码及样式

<div id='adv' style='position:relative;z-index:9999;'>
  <i style='position:fixed;z-index:-1;left:0;top:0;width:100%;height:100%;background:#000;opacity: 0.8;'></i>
  <div style='position:fixed;z-index:10;left:50%;top:50%;margin:-235px 0 0 -350px;'>
  <a id="close" href='javascript:;' style='position:absolute;z-index:1;right:172px;top:0;'>
  <img src='images/x.png' alt='' width='45' height='40'>
  </a>
  <a class='link' href='https://s.click.taobao.com/xJ37CLw' target='_blank'>
  <img src='images/11.png' width='700' height='470' alt=''>
  </a>
  </div>
  </div>

JavaScript代码

 <script>
    var adv=document.getElementById('adv');
    var close=document.getElementById('close');
    /*广告弹出时的卷帘效果方法*/
    function ani(obj){
      var allWidth=document.documentElement.clientWidth; //获取网页可视区域宽
      var allHeight=document.documentElement.clientHeight;//获取网页可视区域高
      adv.style.left= (allWidth-adv.offsetWidth)/2+'px'; //使广告居中在页面
      adv.style.top= (allHeight-adv.offsetHeight)/2+'px';
      var num=0;
      var objH=adv.offsetHeight;
      var timer;
      timer=setInterval(function(){  //定时器,没50毫秒增加10px的高度
        if(num<parseInt(objH)){
          num+=10;
          obj.style.height=num+'px';
        }
        else{
          clearInterval(timer);
        }
      },50);
    }
    /*点击关闭广告*/
    close.onclick=function(){
      adv.style.display="none";
    }
    /*设置cookie,cookie是以字符串形式存储的,可以有很多参数,但必要的一个是cookie 的名称name*/
    function setcookie(){
      var d=new Date(); 
      d.setTime(d.getTime()+24*60*60*1000);  //设置过去时间为当前时间增加一天
      document.cookie="name=world;expires="+d.toGMTString(); //expires是cookie的一个可选参数,设置cookie的过期时间
      var res=document.cookie;
      return res;  //返回cookie字符串
    }
    /*判断网页是否是第一次浏览,如果第一次则弹出广告,然后设置cookie值,否则把广告隐藏*/
    if(document.cookie==""){
      ani(adv);
      setcookie();
    }else{
      adv.style.display='none';
    }
  </script>

以上就是js弹窗效果的代码,希望我的分享能帮助到大家!!

内容版权声明:文章由沙漏博客 博主:颜浩 分享提供!

转载注明出处:https://www.58yanhao.com/a/199.html