用css怎么写弹出广告代码,JS也可以,求大神

html-css04

用css怎么写弹出广告代码,JS也可以,求大神,第1张

其实蛮简单的,你理解了他的原理就会了,简单说一下吧,首先这个广告正常显示同样不影响网页其他的内容的布局,那么他应该是突出来的对吧?这个可以用相对文档的绝对定位或者相对浏览窗口的固定定位,这个会把?

然后再说下弹出效果,这个广告本身是display:none;隐藏的,然后通过js或者jq控制当打开该网页的时候添加display:block就弹出了(显示);复杂点的,有时候弹出来之后别人把他关闭了(或者直接没有关闭按钮,那么这里直接忽略),但是你又想广告过一会又弹出来,这个怎么实现呢?

这里就用到了定时器setInterval,里面加个判断 当该广告的display是none的时候把他改为block,再设置个时间多久循环一次,比如两秒,当广告被关闭,两秒之后会判断一次,因为广告广告是关闭的(display:none)所以他会给广告更改样式(改为display:block),这样广告又出来了

怎么样这样说能够理解吧?剩下的代码就需要你来写了,只把大概思路和你说下

一般来说,广告是选择当前页面模拟弹窗的,而它们的代码一般是加在body标签最后的,所以,我们就有机会屏蔽掉它们了。。。。

1.将你自己的所有代码用一个div包围起来;

2.设置这个div的定位为position:absolute

3.再设置这个div居中,{...top:0left:50%margin-left:/*你页面宽度的一半的负值*/width:/*页面宽度*/}

4.设置这个div的z-index,因为一般弹窗的z-index是用999、9999居多,所以你设置一个比这个大很多的z-index即有机会覆盖广告。。。。(你可以查看具体的广告的z-index后再针对性地设置)

5.所有代码,相信你可以搞定的。。。。

<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8" />

  <title></title>

  <style type="text/css">

  *{

    padding: 0

    margin: 0

  }

      div{

    width:500px

    height:300px

    margin:50px auto

    background: #0000FF

  }

  a{

    float:right

    width:80px

    height:40px

    background:pink

    line-height:40px

    text-align:center

    color:white

    text-decoration: none

  }

  </style>

</head>

<body>

  <!--设置div 设置a-->

  <!--a href=javascript:控制窗口跳转-->

  <!--先获取div和a标签-->

  <!--再设置定时器,先默认让时间为5秒-->

  <!--给oBtn绑定点击事件:当点击a的时候让div出现

  (先判断是否为零,如果为零的话,执行输出

  "关闭")如果不为零执行i++,i;可以把点击

  事件放在setinterval里面。在其中还可以

  设置三秒的延迟关闭的时间--

  注意:倒计时在盒子里面

              不是通过id名获取的,用document.querySelector>-->

      <!--i从5开始-->

      <!--因为是在点击关闭之后出现三秒的延迟时间的,所以在if后面设置关闭的函数-->

  <div>

  <a href=" ">5</a >

  </div>

  <script type="text/javascript">

    var oDiv=document.querySelector("div")

    var oBtn=document.querySelector("a")

    var timer=null

    var i=5

    timer=setInterval(function(){

      if(i==0){

      oBtn.innerHTML="关闭"

      clearInterval(timer)

      oBtn.onclick=function(){

        setTimeout(function(){

        oDiv.style.display="none"

        }

        ,3000)

      }

      }else{

        i--

        oBtn.innerHTML=i

      }

      }

      ,1000)

  </script>

</body>

</html>