本文教大家用原生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> <div> <img src="" alt="结合html5,这可以是一个gif,swf或者video"> <span>X</span> </div> </div> <div>广告入口>></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>