【羽图】《愿山河无恙，人间皆安》

千羽

全屏欣赏

马黑黑

新年好！

这个羽图，可以做成可全屏观赏的效果，会很精彩

千羽

马黑黑 发表于 2023-1-1 19:48
新年好！

这个羽图，可以做成可全屏观赏的效果，会很精彩

黑黑老师新年好。嗯，俺试试哈

马黑黑

千羽 发表于 2023-1-1 20:00
黑黑老师新年好。嗯，俺试试哈

我做个模板给你，使用很简单的。代码：

1. <style>
   
2. #papa { margin: 130px 0 0 calc(50% - 583px); width: 1024px; height: 768px; background: tan url('图片地址') no-repeat center/cover; position: relative; z-index: 1; }
   
3. #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; }
   
4. </style>
   
5. 
   
6. <div id="papa">
   
7.         <!-- 其他 html 代码 -->
   
8.         <span id="btnMsg">全屏欣赏</span>
   
9.         <audio src="音乐地址" autoplay loop></audio>
   
10. </div>
    
11. 
    
12. <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 代码，你要做的是：

谢谢黑黑老师，我现在就去套一下

千羽

马黑黑 发表于 2023-1-1 20:38
@千羽 看地板楼

CSS你要设置的是 #papa { ... } 那里哈，另外一个是按钮设置可以不动

我是个马大哈哦，

千羽

马黑黑 发表于 2023-1-1 20:38
@千羽 看地板楼

CSS你要设置的是 #papa { ... } 那里哈，另外一个是按钮设置可以不动

我现在有点卡

马黑黑

千羽 发表于 2023-1-1 20:51
我现在有点卡

你可以在本地测试，有什么问题再说

马黑黑

千羽 发表于 2023-1-1 20:50
我是个马大哈哦，

熟悉了就好办

千羽

马黑黑 发表于 2023-1-1 20:53
你可以在本地测试，有什么问题再说

我试了，但发在论坛就看不到全屏欣赏的字样

千羽

黑黑老师，测试时还行，发在论坛就看不到：全屏欣赏的字样

千羽

醉美水芙蓉 发表于 2023-1-1 20:54
欣赏千羽大图音画！

谢谢芙蓉，俺真的好笨啊

千羽

马黑黑 发表于 2023-1-1 20:38
@千羽 看地板楼

CSS你要设置的是 #papa { ... } 那里哈，另外一个是按钮设置可以不动

哈哈，再来

千羽

醉美水芙蓉 发表于 2023-1-1 21:06
千羽你可以的，黑黑老师给你了代码，放入你的图片就可以了！

可是看不到“全屏欣赏：字样，在测试时有的，还是不对

千羽

马黑黑 发表于 2023-1-1 20:55
熟悉了就好办

谢谢黑黑老师，我先下了哈

马黑黑

千羽 发表于 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