小辣椒 发表于 2022-12-21 21:24

测试全屏

<style>
#papa {
      margin: auto;
      padding: 10px;
      width: 740px;
      height: 540px;
      background: gray url('https://pic.imgdb.cn/item/63a30b23b1fccdcd36388759.jpg') no-repeat center/cover;
}
#btn888 {
      position: absolute;
      color: white;
      opacity: .45;
      cursor: pointer;
      border: 2px solid snow;
      border-radius: 8px;
      padding: 4px;
      display: none;
      transition: all .75s;
}
#papa:hover #btn888 { display: block; }
#btn888:hover { opacity: 1; }
</style>

<div id="papa" style="">
      <span id="btn888">全屏观赏</span>
</div>

<script>

let fs = false;

btn888.onclick = () => fs ? document.exitFullscreen() : papa.requestFullscreen();

document.addEventListener("fullscreenchange", () => {
      if(document.fullscreenElement !== null) {
                fs = true;
                btn888.innerText = '退出全屏';
      } else {
                fs = false;
                btn888.innerText = '全屏观赏';
      }
});

</script>

小辣椒 发表于 2022-12-21 21:28


<audio style="width:0px;height:4px;" controls="controls" autoplay="autoplay" loop="loop" src="https://wj1.zp68.com:812/lxx/yunhua/2022/12/06/001.mp3" type="audio/mpeg"></audio>


试一下，歌词同步没有做

东篱闲人 发表于 2022-12-21 21:34

景色漂亮！{:5_116:}

小辣椒 发表于 2022-12-21 21:40

东篱闲人 发表于 2022-12-21 21:34
景色漂亮！
老头我想改字体颜色和移动位置没有成功，怕别人不晓得怎么去点击这个全屏

马黑黑 发表于 2022-12-21 22:08

小辣椒 发表于 2022-12-21 21:40
老头我想改字体颜色和移动位置没有成功，怕别人不晓得怎么去点击这个全屏

#btn888 {
        position: absolute;
        top: 5%;
        color: white;
        opacity: .15;
        border: 2px solid snow;
        border-radius: 8px;
        padding: 4px;
        transition: all .75s;
        cursor: pointer;
}

top: 5%; 设定了垂直方向的位置，你加个 left: x%; 设定水平方向的位置，两相结合，精准定位。

小辣椒 发表于 2022-12-21 22:10

马黑黑 发表于 2022-12-21 22:08
#btn888 {
        position: absolute;
        top: 5%;


好的，明天继续做，今天先下了

马黑黑 发表于 2022-12-21 22:11

小辣椒 发表于 2022-12-21 22:10
好的，明天继续做，今天先下了

88

红影 发表于 2022-12-21 22:59

亲爱的这个放大也很漂亮。现在论坛里的图图一个个都可以放大了{:4_173:}{:4_187:}

亦是金 发表于 2022-12-22 14:06

“全屏观赏”按钮的文字颜色很接近背景颜色，我开始没有找到按钮呢！{:4_197:}

东篱闲人 发表于 2022-12-22 21:01

小辣椒 发表于 2022-12-21 21:40
老头我想改字体颜色和移动位置没有成功，怕别人不晓得怎么去点击这个全屏

嗯，有点被背景同化了。。。。{:5_117:}
页: [1]
查看完整版本: 测试全屏