JavaScript implémente l'effet du cadre publicitaire dans le coin inférieur droit-js tutoriel-php.cn

JavaScript implémente l'effet du cadre publicitaire dans le coin inférieur droit

高洛峰

Libérer： 2017-02-04 14:18:17

original

1388 Les gens l'ont consulté

Cet article vous apprend à utiliser JS natif pour implémenter l'effet de boîte publicitaire dans le coin inférieur droit d'une simple page d'accueil de page Web. Faites bon usage du positionnement absolu et cliquez sur X pour fermer la publicité. images ou vidéos animées.

Le code est la version la plus simple, optimisée pour le comportement js, il suffit de copier et coller.

Partie de démonstration

JavaScript implémente leffet du cadre publicitaire dans le coin inférieur droit

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>右下角广告框效果</title>
</head>
<style type="text/css">
  #advbox{
    width: 400px;
    height: 300px;
    position: fixed;
    right: 0;
    bottom: 0;
  }
  .adv{
    width: 380px;
    height: 270px;
    border: 1px solid #a00;
    position: relative;
  }
  #icon{
    display: block;
    width: 24px;
    height: 24px;
    color: #0c0;
    font-size: 30px;
    font-weight: bolder;
    position: absolute;
    right: 2px;
    top: 2px;
    cursor: pointer;
  }
  #resetadv{
    width: 105px;
    height:20px;
    position: fixed;
    right: 25px;
    bottom: 15px;
    color: #fff;
    font-size: 20px;
    background-color: #333;
  }
  .hide{
    display: none;
  }
  .show{
    display: block;
  }
</style>
<body>
  <div id="advbox">
    <div>
    <img src="" alt="结合html5,这可以是一个gif,swf或者video">
    <span id="icon">X</span>
    </div>
  </div>
  <div id="resetadv">广告入口>></div>
 
<script type="text/javascript">
  (function(){
      //封装一下dom的id操作
      var $ = function(id){
        return document.getElementById(id);
      };
      //添加点击事件
      $("icon").onclick=function(){
        $("advbox").className = "hide";
      };
      $("resetadv").onmouseover=function(){
        $("advbox").className = "show";
      };
  })();
</script>  
</body>
</html>

Copier après la connexion

Ce qui précède est l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun, et. J'espère que tout le monde le soutiendra.

Pour plus d'articles liés au javascript implémentant l'effet de la boîte publicitaire dans le coin inférieur droit, veuillez faire attention au site Web PHP chinois !