Home > Article > Web Front-end > JavaScript implements the effect of the advertising box in the lower right corner

JavaScript implements the effect of the advertising box in the lower right corner

高洛峰Original: 2017-02-04 14:18:171396browse

This article teaches you how to use native js to implement the effect of the advertising box in the lower right corner of a simple web page homepage. Make good use of absolute positioning and click X to close the ad. The content inside can be either animated or video.

The code is the most concise, js behavior optimized version, just copy and paste.

Demo part

JavaScript implements the effect of the advertising box in the lower right corner

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

The above is the entire content of this article. I hope it will be helpful to everyone’s learning. I also hope that everyone will learn PHP Chinese. net.

Please pay attention to the PHP Chinese website for more articles related to JavaScript implementation of the advertising box effect in the lower right corner!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Pure javascript code to implement calculator function (three methods)Next article：Pure javascript code to implement calculator function (three methods)

See more

JavaScript implements the effect of the advertising box in the lower right corner

Related articles