缓慢关闭广告

缓慢关闭广告

2018-04-09

6043 次瀏覽

1040字数

描述：当用户点击关闭按钮的时候，广告栏会逐渐变为透明，最后关闭
示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>模拟京东广告栏的关闭</title>
    <style>
        .top-banner{
            height: 80px;
            background: #ff551d;
        }
        .w{
            background: #b82518;
            width: 1200px;
            height: 80px;
            margin: 0 auto;
            position: relative;
        }
        a{
            position: absolute;
            top: 10px;
            right: 10px;
            width: 25px;
            height: 25px;
            text-align: center;
            line-height: 25px;
            background-color: #000;
            color: #fff;
            text-decoration: none
        }
    </style>
</head>
<body>
    <div class="top-banner" style="opacity: 1">
        <div class="w">
            <a href="#">×</a>
        </div>
    </div>
</body>
</html>
<script>
    var topBammer = document.getElementsByClassName("top-banner")[0];
    var a = document.getElementsByTagName("a")[0];
    var timer = null;
    a.onclick = function () {
        timer = setInterval(function () {
            topBammer.style.opacity -= 0.1;
            if(topBammer.style.opacity<0){
                topBammer.style.display = "none";
                clearInterval(timer);
            }
        },50);
    }
</script>