javascript实现右下角广告框效果

本文教大家用原生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>

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