Heim > Artikel > Web-Frontend > JavaScript implementiert den Effekt der Werbebox in der unteren rechten Ecke

JavaScript implementiert den Effekt der Werbebox in der unteren rechten Ecke

高洛峰Original: 2017-02-04 14:18:171369Durchsuche

In diesem Artikel erfahren Sie, wie Sie mit nativem JS den Werbebox-Effekt in der unteren rechten Ecke einer einfachen Webseiten-Startseite implementieren und auf X klicken, um die Anzeige zu schließen animierte Bilder oder Videos.

Der Code ist die einfachste, für das JS-Verhalten optimierte Version, einfach kopieren und einfügen.

Demonstrationsteil

JavaScript implementiert den Effekt der Werbebox in der unteren rechten Ecke

<!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>

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich sein wird Ich hoffe, dass jeder die chinesische PHP-Website unterstützt.

Weitere Artikel zur JavaScript-Implementierung des Werbebox-Effekts in der unteren rechten Ecke finden Sie auf der chinesischen PHP-Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Reiner Javascript-Code zur Implementierung der Taschenrechnerfunktion (drei Methoden)Nächster Artikel：Reiner Javascript-Code zur Implementierung der Taschenrechnerfunktion (drei Methoden)

In Verbindung stehende Artikel

Mehr sehen