描述：当用户打开页面的右下角显示一个广告，当用户点击关闭按钮的时候，广告底部先消失，然后整个广告全部消失。如果用户不点击关闭，在页面打开5秒之后，广告也会按照上述关闭方式进行关闭。
示例代码：
<!DOCTYPE html>
<meta charset="UTF-8">
<title>模拟屏幕右下角广告</title>
<style>
.box{
width: 322px;
position: fixed;
bottom:0;
right:0;
}
span{
position: absolute;
top:0;
right:0;
width:30px;
height: 20px;
cursor: pointer;
}
</style>
<script>
window.onload = function () {
var guanbi = document.getElementById("guanbi");
var box = guanbi.parentNode;
var b = document.getElementById("b");
guanbi.onclick =close;
setTimeout(close,5000);
function close() {
console.log(1);
animate(b,{"height":0},function () {
animate(box,{"width":0});
})
}
function animate(ele,json,fn) {
clearInterval(ele.timer);
ele.timer = setInterval(function () {
var bool = true;
for(var k in json){
var leader = parseInt(getStyle(ele,k)) || 0;
var step = (json[k] - leader)/10;
step = step>0?Math.ceil(step):Math.floor(step);
leader = leader + step;
ele.style[k] = leader + "px";
}
if(json[k] !== leader){
bool = false;
}
if(bool){
clearInterval(ele.timer);
if(fn){
fn();
}
}
},1);
}
function getStyle(ele,attr) {
if(window.getComputedStyle){
return window.getComputedStyle(ele,null)[attr];
}
return ele.currentStyle[attr];
}
}
</script><div class="box">
<span id="guanbi"></span>
<div class="hd" id="t">
<img src="images/t.jpg" alt=""/>
</div>
<div class="bd" id="b">
<img src="images/b.jpg" alt=""/>
</div>
</div>