浮空广告[组件]

软件开源 Discourse
1

image
image

每次刷新会从新出现

image

image
image1058×729 29.6 KB

image
image1066×761 40.4 KB

1,CSS

/* CSS代码 */
.floating-image {
  position: fixed; /* 将悬浮图片固定在页面上 */
  top: 50%; /* 设置悬浮图片距离页面顶部的距离为页面高度的一半 */
  transform: translateY(-50%); /* 使用transform属性将图片垂直居中 */
}

.left {
  left: 0;
}

.right {
  right: 0;
}


.close-label {
  position: absolute;
  top: 5px;
  right: 5px;
  background-color: rgba(255, 255, 255, 0.5);
  padding: 5px;
  cursor: pointer;
}

#left-close-checkbox:checked ~ .left .close-label {
  display: none; /* 当左侧关闭按钮复选框被选中时隐藏对应的左侧关闭按钮 */
}

#right-close-checkbox:checked ~ .right .close-label {
  display: none; /* 当右侧关闭按钮复选框被选中时隐藏对应的右侧关闭按钮 */
}

.close-checkbox:checked ~ a img {
  display: none; /* 当关闭按钮复选框被选中时隐藏对应的悬浮图片 */
}
.close-checkbox {
  display: none; /* 隐藏关闭按钮复选框 */
}

2.正文

<!-- HTML代码 -->
<div class="floating-image left">
  <!-- 左侧悬浮图片容器 -->
  <input type="checkbox" id="left-close-checkbox" class="close-checkbox"> <!-- 左侧关闭按钮复选框 -->
  <label for="left-close-checkbox" class="close-label">隐藏</label> <!-- 左侧关闭按钮标签 -->
  <a href="https://www.justnainai.com/t/topic/3970" target="_blank">
    <!-- 左侧悬浮图片链接 -->
    <img src="https://www.justnainai.com/uploads/default/original/2X/5/5adb9374eced1e03022705402399f5bd1f2c6143.png" alt="Left Floating Image">
    <!-- 左侧悬浮图片 -->
  </a>
</div>

<div class="floating-image right">
  <!-- 右侧悬浮图片容器 -->
  <input type="checkbox" id="right-close-checkbox" class="close-checkbox"> <!-- 右侧关闭按钮复选框 -->
  <label for="right-close-checkbox" class="close-label">隐藏</label> <!-- 右侧关闭按钮标签 -->
  <a href="https://www.justnainai.com/t/topic/3970" target="_blank">
    <!-- 右侧悬浮图片链接 -->
    <img src="https://www.justnainai.com/uploads/default/original/2X/5/5adb9374eced1e03022705402399f5bd1f2c6143.png" alt="Right Floating Image">
    <!-- 右侧悬浮图片 -->
  </a>
</div>
1 Like