JS对联广告 点击关闭后切换到小广告

JS对联广告 点击关闭后切换到小广告

实现思路

1. HTML结构： 创建两个div容器，一个用于大尺寸对联广告，另一个用于小尺寸广告。
2. CSS样式： 设置两个容器的样式，包括位置、大小、显示/隐藏等。
3. JavaScript交互：
   • 初始化时，显示大尺寸广告。
   • 添加关闭按钮点击事件，隐藏大尺寸广告，同时显示小尺寸广告。
   • 可选：使用localStorage或sessionStorage记录用户关闭状态，下次访问时不再显示大尺寸广告。

代码示例

<div class="ad-container big" id="bigAd">
  <img src="big-ad.jpg" alt="大尺寸广告">
  <span class="close">X</span>
  <div class="ad-content">
    <p>上联：...</p>
    <p>下联：...</p>
  </div>
</div>
<div class="ad-container small" id="smallAd" style="display: none;">
  <img src="small-ad.jpg" alt="小尺寸广告">
</div>

.ad-container {
  position: fixed;
  top: 10px;
  right: 10px;
  background: #fff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  z-index: 999;
}

.big {
  /* 大尺寸广告样式 */
}

.small {
  /* 小尺寸广告样式 */
}

const bigAd = document.getElementById('bigAd');
const smallAd = document.getElementById('smallAd');
const closeBtn = bigAd.querySelector('.close');

closeBtn.addEventListener('click', () => {
  bigAd.style.display = 'none';
  smallAd.style.display = 'block';
  // 记录关闭状态
  localStorage.setItem('adClosed', 'true');
});

// 加载页面时判断是否显示大尺寸广告
if (localStorage.getItem('adClosed') === 'true') {
  bigAd.style.display = 'none';
  smallAd.style.display = 'block';
}

代码解释

• HTML结构： 创建两个div容器，分别用于大尺寸和小尺寸广告。
• CSS样式： 为两个容器设置不同的样式，初始时隐藏小尺寸广告。
• JavaScript交互：
  • 获取两个容器和关闭按钮的DOM元素。
  • 添加关闭按钮的点击事件，隐藏大尺寸广告，显示小尺寸广告。
  • 使用localStorage记录用户关闭状态，下次访问时不再显示大尺寸广告。

优化与扩展

• 动画效果： 使用CSS3的transition或animation属性为广告切换添加动画效果。
• 广告位置： 可以根据页面布局和用户习惯选择合适的广告位置。
• 广告样式： 设计美观、不影响用户阅读的广告样式。
• 用户体验： 避免广告遮挡重要内容，提供清晰的关闭按钮。
• 广告轮播： 可以实现多个小尺寸广告轮流展示。
• 广告点击统计： 记录广告点击次数，用于广告效果评估。
• 广告定向： 根据用户行为或兴趣进行广告投放。

注意事项

• 广告法规定： 确保广告内容符合相关法律法规。
• 用户隐私： 尊重用户隐私，避免收集过多用户信息。
• 浏览器兼容性： 考虑不同浏览器的兼容性。

总结

通过上述代码，您可以实现一个点击关闭后切换到小尺寸广告的对联广告。您可以根据实际需求进行调整和扩展。

温馨提示： 在实际应用中，您可能需要根据您的具体需求对代码进行调整和优化。

如果您有更具体的需求或问题，欢迎随时提出！

例如，您可以提供以下信息：

• 广告的具体尺寸和位置
• 对联的文字内容和样式
• 是否需要动画效果
• 是否需要统计广告点击次数

我将根据您的需求，提供更详细的代码示例和指导。

关键词： JS对联广告，点击关闭，切换广告，HTML, CSS, JavaScript, 用户体验