javascript实现右下角广告框效果

2019-11-19 17:46:10

字体：大中小

来源：转载

供稿：网友

本文教大家用原生js实现的简单网页主页右下角的广告框效果，利用好绝对定位，点击X关闭广告，里面的内容不管动图或者视频都可以。

代码最简洁，js行为优化版，复制粘贴即可使用。

演示部分

<!DOCTYPE html><html lang="en"><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 class="adv">    <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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持武林网。

上一篇：javascript实现简易计算器

下一篇：基于javascript实现最简单选项卡切换