网站页首可关闭广告条源码

当前位置：电视猫 > JavaScript>

电视猫时间： 2024-08-29 09:57:04

　　网站页首可关闭广告条源码

HTML结构

HTML


<div class="ad-banner">

  <span>这是一条广告</span>

  <button class="close-btn">关闭</button>

</div>

CSS样式

CSS


.ad-banner {

  position: fixed;

  top: 0;

  left: 0;

  width: 100%;

  background-color: #f0f0f0;

  padding: 10px;

  z-index: 999;

}



.close-btn {

  float: right;

  cursor: pointer;

}

JavaScript代码

JavaScript


const closeBtn = document.querySelector('.close-btn');

const adBanner = document.querySelector('.ad-banner');



closeBtn.addEventListener('click', () => {

  adBanner.style.display = 'none';

  // 可选：将关闭状态保存到本地存储，下次访问不再显示

  localStorage.setItem('adClosed', 'true');

});



// 检查本地存储，如果已关闭，则隐藏广告条

if (localStorage.getItem('adClosed') === 'true') {

  adBanner.style.display = 'none';

}

代码解释

HTML结构: 创建一个带有ad-banner类的div作为广告条容器，并在其中放置广告内容和关闭按钮。
CSS样式: 将广告条固定在页面顶部，设置背景颜色、填充等样式。
JavaScript代码:
- 获取关闭按钮和广告条元素。
- 添加点击事件，点击关闭按钮时将广告条的display属性设置为none，实现隐藏效果。
- 可选地，将关闭状态保存到本地存储，下次用户访问时，如果已经关闭过，则不再显示广告条。

优化与扩展

动画效果: 可以使用CSS3的transition或animation属性为广告条的显示和隐藏添加动画效果。
cookie存储: 除了localStorage，还可以使用cookie来保存关闭状态。
用户体验: 可以增加一些交互效果，比如鼠标悬停时改变按钮样式。
广告内容动态获取: 可以通过Ajax从服务器获取广告内容，实现动态更新。
广告位管理: 可以设置多个广告位，并通过JavaScript随机显示。

示例

HTML


<!DOCTYPE html>

<html>

<head>

  <title>可关闭广告条</title>

  <style>

    /* CSS样式 */

  </style>

</head>

<body>

  <div class="ad-banner">

    <span>这是一条广告</span>

    <button class="close-btn">关闭</button>

  </div>

  <script>

    // JavaScript代码

  </script>

</body>

</html>