可关闭 js 对联广告代码(图片非flash)

可关闭的JS对联广告代码（图片非Flash）

理解需求

您希望创建一个使用JavaScript制作的对联广告，并且这个广告可以被用户手动关闭。同时，广告中的图片是非Flash格式，以保证更好的兼容性和性能。

实现方案

HTML结构

<div class="ad-container">
  <img src="your-ad-image.jpg" alt="对联广告">
  <span class="close">X</span>
  <div class="ad-content">
    <p>上联：...</p>
    <p>下联：...</p>
  </div>
</div>

CSS样式

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

.close {
  position: absolute;
  top: 5px;
  right: 5px;
  cursor: pointer;
  font-size: 16px;
  font-weight: bold;
}

/* 其他样式，根据需求自定义 */

JavaScript交互

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

closeBtn.addEventListener('click', () => {
  closeBtn.parentNode.style.display = 'none';
  // 可以将关闭状态存储在localStorage中，下次访问时不再显示
  localStorage.setItem('adClosed', 'true');
});

// 加载页面时判断是否显示广告
if (localStorage.getItem('adClosed') === 'true') {
  document.querySelector('.ad-container').style.display = 'none';
}

代码解释

• HTML结构： 创建一个div容器作为广告的容器，包含图片、关闭按钮和对联文字。
• CSS样式： 使用CSS定位广告的位置，设置背景色、阴影等样式，以及为关闭按钮设置样式。
• JavaScript交互： 获取关闭按钮，添加点击事件。点击关闭按钮时，隐藏广告容器，并将关闭状态存储在localStorage中。

核心功能

• 可关闭： 用户可以点击关闭按钮隐藏广告。
• 本地存储： 记住用户关闭广告的状态，下次访问时不再显示。
• 自定义： 可以根据需要修改广告的样式、位置、内容等。

优化建议

• 广告位置： 可以根据页面布局和用户习惯选择合适的广告位置。
• 广告样式： 设计美观、不影响用户阅读的广告样式。
• 用户体验： 避免广告遮挡重要内容，提供清晰的关闭按钮。
• 性能优化： 减少广告加载时间，提高页面性能。
• 响应式设计： 考虑不同屏幕尺寸下的适配，可以使用媒体查询。
• 动画效果： 可以使用CSS3的transition或animation属性为广告添加动画效果，增强视觉效果。

注意事项

• 广告法规定： 确保广告内容符合相关法律法规。
• 用户隐私： 尊重用户隐私，避免收集过多用户信息。

扩展功能

• 广告轮播： 实现多个广告轮流展示。
• 广告点击统计： 记录广告点击次数，用于广告效果评估。
• 广告定向： 根据用户行为或兴趣进行广告投放。
• 广告延迟加载： 延迟加载广告，减少页面初始加载时间。

总结

通过以上代码和解释，您可以创建一个符合Web标准、用户体验友好的对联广告。您可以根据实际需求进行调整和扩展。

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

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

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

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

关键词： JS对联广告，HTML, CSS, JavaScript, 响应式设计，用户体验

希望这份回答能帮助您！