jQuery实现弹窗广告

使用JavaScript制作弹窗广告的案例。

使用方法

在html中引入jquery.min.js

<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>

HTML结构

// 广告页面
<div class="ad">
    // 关闭按钮
    <span class="close"></span>
</div>

CSS样式

    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .ad{
            display: none;
            width: 400px;
            height: 250px;
            background: rgb(49, 237, 243);
            position: fixed;
            right: 0;
            bottom: 0;
        }
        .close{
            position: absolute;
            right: 0;
            top: 0;
            width: 30px;
            height: 30px;
            background: #f40;
        }
    </style>

JavaScript代码

    $(".close").click(function(){
        $('.ad').removeClass("ad");
        $(".close").removeClass("close")
    })
    $('.ad').stop().slideDown(1000).fadeOut(1000).fadeIn(1000);

在打开页面的时候会在右下角滑出广告，消失，然后再出现，点击红色区域关闭广告显示。