对联广告

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>40-对联广告</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .left{
            float: left;
            position: fixed;
            left: 0;
            top: 200px;
        }
        .right{
            float: right;
            position: fixed;
            right: 0;
            top: 200px;
        }
        img{
            display: none;
        }
    </style>
    <script src="js/jquery-1.12.4.js"></script>
    <script>
        $(function () {
            // 1.监听网页的滚动
            $(window).scroll(function () {
                // 1.1获取网页滚动的偏移位
                var offset = $("html,body").scrollTop();
                // 1.2判断网页是否滚动到了指定的位置
                if(offset >= 500){
                    // 1.3显示广告
                    $("img").show(1000);
                }else{
                    // 1.4隐藏广告
                    $("img").hide(1000);
                }
            });

        });
    </script>
</head>
<body>
<img src="images/left_ad.png" class="left">
<img src="images/right_ad.png" class="right">
<br>
<br>
。
。
。
（此处省略五百个<br>）
。
。
。
<br>
</body>
</html>

弹窗广告

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>46-弹窗广告</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .ad{
            position: fixed;
            right: 0;
            bottom: 0;
            display: none;
        }
        .ad>span{
            display: inline-block;
            width: 30px;
            height: 30px;
            position: absolute;
            top: 0;
            right: 0;
        }
    </style>
    <script src="js/jquery-1.12.4.js"></script>
    <script>
        $(function () {
            // 1.监听span的点击事件
            $("span").click(function () {
                $(".ad").remove();
            });

            // 2.执行广告动画
            /*
            $(".ad").slideDown(1000, function () {
                $(".ad").fadeOut(1000, function () {
                    $(".ad").fadeIn(1000);
                });
            });
            */
            $(".ad").stop().slideDown(1000).fadeOut(1000).fadeIn(1000);

        });
    </script>
</head>
<body>
<div class="ad">
    <img src="images/ad-pic.png" alt="">
    <span></span>
</div>
</body>
</html>