下面是一个完整的HTML+CSS+JavaScript实现，创建一个从底部弹出的广告图片，并带有关闭按钮功能：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>底部弹出广告示例</title> <style> body { margin: 0; padding: 0; font-family: Arial, sans-serif; height: 200vh; /* 为了演示滚动效果，设置较长页面 */ } /* 底部广告容器样式 */ .bottom-ad-container { position: fixed; bottom: -200px; /* 初始隐藏在屏幕下方 */ left: 0; width: 100%; background-color: #fff; box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1); z-index: 9999; transition: bottom 0.3s ease; display: flex; justify-content: center; align-items: center; padding: 10px 0; } /* 广告显示时的状态 */ .bottom-ad-container.show { bottom: 0; } /* 广告内容区域 */ .ad-content { position: relative; width: 90%; max-width: 500px; } /* 广告图片样式 */ .ad-image { width: 100%; height: auto; display: block; border-radius: 8px; } /* 关闭按钮样式 */ .close-btn { position: absolute; top: -15px; right: -15px; width: 30px; height: 30px; background-color: #ff4d4f; color: white; border: none; border-radius: 50%; font-size: 16px; font-weight: bold; cursor: pointer; display: flex; justify-content: center; align-items: center; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); } /* 响应式调整 - 小屏幕 */ @media (max-width: 480px) { .close-btn { top: -10px; right: -10px; width: 24px; height: 24px; font-size: 14px; } } </style> </head> <body> <!-- 页面内容 --> <div style="padding: 20px;"> <h1>网页内容</h1> <p>向下滚动查看底部广告效果...</p> <p>这是一个演示页面，底部有一个弹出式广告。</p> </div> <!-- 底部广告HTML --> <div id="bottomAd"> <div> <button id="closeAdBtn">×</button> <!-- 替换为你的广告图片URL --> <a href="https://example.com" target="_blank" rel="noopener noreferrer"> <img src="https://via.placeholder.com/500x150/FF5733/FFFFFF?text=广告图片" alt="广告"> </a> </div> </div> <script> document.addEventListener('DOMContentLoaded', function() { const adContainer = document.getElementById('bottomAd'); const closeBtn = document.getElementById('closeAdBtn'); // 页面加载后延迟显示广告（模拟异步加载） setTimeout(() => { adContainer.classList.add('show'); }, 1000); // 关闭按钮点击事件 closeBtn.addEventListener('click', function(e) { e.preventDefault(); adContainer.classList.remove('show'); // 可选：设置cookie记录用户已关闭广告，避免重复显示 // setCookie('adClosed', 'true', 1); // 1天有效期 }); // 可选：滚动到一定位置显示广告 /* window.addEventListener('scroll', function() { if (window.scrollY > 300 && !adContainer.classList.contains('show')) { adContainer.classList.add('show'); } }); */ // 可选：设置cookie的函数 function setCookie(name, value, days) { let expires = ""; if (days) { const date = new Date(); date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000)); expires = "; expires=" + date.toUTCString(); } document.cookie = name + "=" + (value || "") + expires + "; path=/"; } }); </script> </body> </html>功能说明
弹出效果：广告从屏幕底部滑入，有平滑的动画效果
关闭按钮：右上角的圆形关闭按钮，点击后广告滑出屏幕
响应式设计：适配不同屏幕尺寸
可扩展性：
可以替换广告图片URL
可以设置广告链接
可以添加滚动显示逻辑（代码中已注释）
可以添加cookie记录避免重复显示（代码中已注释）
自定义选项
替换广告图片：修改
<img>标签的src属性修改广告链接：修改
<a>标签的href属性调整动画速度：修改CSS中的
transition属性值调整广告大小：修改CSS中的
.ad-content宽度和图片尺寸
附带延伸版：
简化代码，将所有HTML、CSS和JS都封装在一个JS文件中，这样你只需要在底部引入一个JS文件即可。以下是简化后的版本：
// bottom-ad.js
(function() {
// 创建样式
const style = document.createElement('style');
style.textContent = `
.bottom-ad-container {
position: fixed;
bottom: -200px;
left: 0;
width: 100%;
background: #fff;
z-index: 9999;
transition: bottom 0.3s;
display: flex;
justify-content: center;
padding: 10px 0;
box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
}
.bottom-ad-container.show {
bottom: 0;
}
.ad-content {
position: relative;
width: 90%;
max-width: 500px;
}
.ad-image {
width: 100%;
height: auto;
display: block;
}
.close-ad-btn {
position: absolute;
top: -12px;
right: -12px;
width: 24px;
height: 24px;
background: #ff4d4f;
color: white;
border: none;
border-radius: 50%;
font-size: 14px;
cursor: pointer;
}
`;
document.head.appendChild(style);
// 创建广告HTML
const adHTML = `
<div class="bottom-ad-container" id="bottomAd">
<div class="ad-content">
<button class="close-ad-btn" id="closeAdBtn">×</button>
<a href="https://example.com" target="_blank" rel="noopener">
<img src="https://via.placeholder.com/500x120/FF5733/FFFFFF?text=广告图片" alt="广告" class="ad-image">
</a>
</div>
</div>
`;
document.body.insertAdjacentHTML('beforeend', adHTML);
// 显示广告
setTimeout(() => {
const ad = document.getElementById('bottomAd');
if (ad) ad.classList.add('show');
}, 1000);
// 关闭广告
document.getElementById('closeAdBtn')?.addEventListener('click', function(e) {
e.preventDefault();
const ad = document.getElementById('bottomAd');
if (ad) ad.classList.remove('show');
});
})();使用方法
将上面的代码保存为
bottom-ad.js文件在网页底部引入这个JS文件：
<!-- 在网页底部，body标签结束前引入 --> <script src="path/to/bottom-ad.js"></script> </body> </html>
自定义选项
如果你想自定义广告内容，可以修改JS文件中的这些部分：
修改广告图片：
javascript// 修改这行中的src和alt属性<img src="https://via.placeholder.com/500x120/FF5733/FFFFFF?text=广告图片" alt="广告" class="ad-image">
修改广告链接：
javascript// 修改这行中的href属性<a href="https://example.com" target="_blank" rel="noopener">
调整显示延迟：
javascript// 修改这里的1000（毫秒）来调整广告弹出延迟setTimeout(() => {const ad = document.getElementById('bottomAd');if (ad) ad.classList.add('show');}, 1000);
这个简化版本保留了核心功能：底部悬浮、平滑动画、关闭按钮，同时将所有代码封装在一个JS文件中，方便引入。
版权声明：本文除非特别标注，否则均为本站原创文章，转载或引用请注明来源及作者，并保留本文原始链接！
还木有评论哦，快来抢沙发吧~