|
|
本帖最后由 马黑黑 于 2023-1-1 20:35 编辑
我做个模板给你,使用很简单的。代码:
- <style>
- #papa { margin: 130px 0 0 calc(50% - 583px); width: 1024px; height: 768px; background: tan url('图片地址') no-repeat center/cover; position: relative; z-index: 1; }
- #btnMsg { position: absolute; left: 50%; transform: translate(-50%,0); top: 10px; color: snow; background: green; opacity: 0; border: 2px solid snow; border-radius: 8px; padding: 4px; transition: all .75s; cursor: pointer; z-index: 10; }
- </style>
- <div id="papa">
- <!-- 其他 html 代码 -->
- <span id="btnMsg">全屏欣赏</span>
- <audio src="音乐地址" autoplay loop></audio>
- </div>
- <script>(function(){let fs = false, timerId;papa.onmousemove = (e) => {clearTimeout(timerId);btnMsg.style.opacity = '.95';timerId = setTimeout('btnMsg.style.opacity = "0"', 3000);};document.addEventListener("fullscreenchange", () => {if (document.fullscreenElement !== null) {fs = true;btnMsg.innerText = '退出全屏';} else {fs = false;btnMsg.innerText = '全屏观赏';}});btnMsg.onclick = () => fs ? document.exitFullscreen() : papa.requestFullscreen();})();</script>
复制代码
第一部分是 CSS 代码,你要做的是:
① 设置帖子的高宽 —— width 和 height 的值;
② 帖子的居中在这一句:
margin: 130px 0 0 calc(50% - 583px);
583px 的得来要简单计算一下:帖子宽度的一半 + 81
③ 给出图片地址。不必用img发帖,这个效果更好。
第二部分是 HTML 代码,你要做的事情是,填写歌曲地址、音乐地址,还有其他代码(替换掉 <!-- 其他 html 代码 --> )。
第三部分是 JS 代码,你可以不用管,留着它就行,它的作用是控制全屏。
帖子以你默认的尺寸显示,然后,鼠标指针滑过帖子,“全屏观赏”按钮弹出,点击它进入全屏;进入全屏后可以退出全屏。按钮会在鼠标离开了帖子或没有动作的情况下,3秒钟后自动消失。
|
|