漂浮广告可点击关闭js特效

漂浮广告是一种常见的网页广告形式，它通常会在用户浏览网页时浮动在页面的上方、下方或侧边。为了提升用户体验，这些广告通常会提供一个关闭按钮，允许用户点击关闭广告。下面是一个简单的JavaScript特效示例，用于实现漂浮广告的可点击关闭功能。

基础概念

漂浮广告：一种在网页上浮动的广告，可以是图片、视频或其他媒体形式。

JavaScript特效：使用JavaScript编写的脚本，用于实现网页上的动态效果和交互功能。

类型

固定位置：广告始终保持在屏幕的某个固定位置。
跟随滚动：广告会随着页面滚动而移动。
自动消失：广告在一定时间后自动消失。

应用场景

电商网站：推广产品或促销活动。
新闻网站：展示相关新闻或广告。
社交媒体：推广用户生成内容或广告。

示例代码

以下是一个简单的漂浮广告示例，包含一个可点击关闭的按钮：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Floating Ad Example</title>
    <style>
        #floatingAd {
            position: fixed;
            bottom: 20px;
            right: 20px;
            width: 200px;
            height: 100px;
            background-color: #f0f0f0;
            border: 1px solid #ccc;
            padding: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
        #closeButton {
            position: absolute;
            top: 5px;
            right: 5px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div id="floatingAd">
        <span id="closeButton">X</span>
        <p>This is a floating ad!</p>
    </div>

    <script>
        document.getElementById('closeButton').addEventListener('click', function() {
            document.getElementById('floatingAd').style.display = 'none';
        });
    </script>
</body>
</html>