Maison > Article > interface Web > JavaScript implémente l'effet du cadre publicitaire dans le coin inférieur droit

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

高洛峰original: 2017-02-04 14:18:171369parcourir

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>

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 !

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Code javascript pur pour implémenter la fonction de calculatrice (trois méthodes)Article suivant：Code javascript pur pour implémenter la fonction de calculatrice (trois méthodes)

Articles Liés

Voir plus