孙肖宁

模拟屏幕右下角的广告点击关闭
描述:当用户打开页面的右下角显示一个广告,当用户点击关闭按钮的时候,广告底部先消失,然后整个广告全部消失。如果用户...
扫描右侧二维码阅读全文
23
2018/04

模拟屏幕右下角的广告点击关闭

描述:当用户打开页面的右下角显示一个广告,当用户点击关闭按钮的时候,广告底部先消失,然后整个广告全部消失。如果用户不点击关闭,在页面打开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>


Last modification:April 23rd, 2018 at 10:52 am
If you think my article is useful to you, please feel free to appreciate

Leave a Comment