浮空广告

:information_source: Summary 悬浮的图片
:hammer_and_wrench: Repository 自己使用组件安装

演示图片



每次刷新会从新出现

教程

image


1,CSS

Summary
/* 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.正文

Summary
<!-- 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>

2 Likes

discourse, #插件添加#windows移除

你的网站做的真的很好看,我想问一下那个时间轴的顶部跳转和底部跳转是怎么做的,有组件吗?谢谢啦

那个是组件是

GitHub - ScottMastro/discourse-scroll-buttons

1 Like