【羽图】《愿山河无恙，人间皆安》
本帖最后由 千羽 于 2023-1-2 15:27 编辑 <br /><br /><style>#papa { margin: 130px 0 0 calc(50% - 881px); width: 1600px; height: 1000px; background: tan url('https://pic.imgdb.cn/item/63b167332bbf0e7994686d66.jpg') 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="http://music.163.com/song/media/outer/url?id=237690.mp3" 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> 新年好！
这个羽图，可以做成可全屏观赏的效果，会很精彩 本帖最后由 千羽 于 2023-1-1 20:02 编辑
马黑黑 发表于 2023-1-1 19:48
新年好！
这个羽图，可以做成可全屏观赏的效果，会很精彩
黑黑老师新年好。嗯，俺试试哈{:4_187:} 本帖最后由 马黑黑 于 2023-1-1 20:35 编辑
千羽 发表于 2023-1-1 20:00
黑黑老师新年好。嗯，俺试试哈
我做个模板给你，使用很简单的。代码：
<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秒钟后自动消失。
@千羽 看地板楼
CSS你要设置的是 #papa { ... } 那里哈，另外一个是按钮设置可以不动 马黑黑 发表于 2023-1-1 20:30
我做个模板给你，使用很简单的。代码：
第一部分是 CSS 代码，你要做的是：
谢谢黑黑老师，我现在就去套一下{:4_187:} 马黑黑 发表于 2023-1-1 20:38
@千羽 看地板楼
CSS你要设置的是 #papa { ... } 那里哈，另外一个是按钮设置可以不动
我是个马大哈哦，{:4_173:} 马黑黑 发表于 2023-1-1 20:38
@千羽 看地板楼
CSS你要设置的是 #papa { ... } 那里哈，另外一个是按钮设置可以不动
我现在有点卡{:4_181:} 千羽 发表于 2023-1-1 20:51
我现在有点卡
你可以在本地测试，有什么问题再说 千羽 发表于 2023-1-1 20:50
我是个马大哈哦，
熟悉了就好办 马黑黑 发表于 2023-1-1 20:53
你可以在本地测试，有什么问题再说
我试了，但发在论坛就看不到全屏欣赏的字样{:4_203:} 黑黑老师，测试时还行，发在论坛就看不到：全屏欣赏的字样{:4_203:} 醉美水芙蓉 发表于 2023-1-1 20:54
欣赏千羽大图音画！
谢谢芙蓉，俺真的好笨啊{:4_181:} 马黑黑 发表于 2023-1-1 20:38
@千羽 看地板楼
CSS你要设置的是 #papa { ... } 那里哈，另外一个是按钮设置可以不动
哈哈，再来{:4_173:} 醉美水芙蓉 发表于 2023-1-1 21:06
千羽你可以的，黑黑老师给你了代码，放入你的图片就可以了！
可是看不到“全屏欣赏：字样，在测试时有的，还是不对{:4_181:} 马黑黑 发表于 2023-1-1 20:55
熟悉了就好办
谢谢黑黑老师，我先下了哈{:4_203:} 千羽 发表于 2023-1-1 21:19
可是看不到“全屏欣赏：字样，在测试时有的，还是不对
你漏了JS代码（红色部分）：
<style>
#papa { margin: 130px 0 0 calc(50% - 881px); width: 1600px; height: 1000px; background: tan url('https://pic.imgdb.cn/item/63b167332bbf0e7994686d66.jpg') 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">
<span id="btnMsg">全屏欣赏</span>
<audio src="http://music.163.com/song/media/outer/url?id=237690.mp3" 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>
千羽 发表于 2023-1-1 21:21
谢谢黑黑老师，我先下了哈
88