论坛 › 马黑黑教程专版 › 全屏帖子的实现方法

马黑黑 发表于 2022-12-21 17:06

全屏帖子的实现方法

本帖最后由 马黑黑 于 2022-12-21 19:42 编辑

可能很多人都知道F11在浏览器中的作用：全屏浏览。其实这个全屏是伪全屏，它仅仅将浏览器的顶部隐藏掉，保留滚动条（如有）且页面元素保持原样。这不是我们感兴趣的，我们要讨论的是帖子的全屏显示，在该效果之下不仅隐藏浏览器的头部，还能放大主元素到屏幕的四个边角。

我们要实现的功能，在JS里称为“全屏元素”，fullscreenElement，我们可以用它检测 document（文档）是否处于某个元素的全屏显示状态，换言之，是否拥有正在全屏显示的元素：

let fs; //声明 fs 变量用以装载页面是否处于全屏显示某个元素的状态

if(document.fullscreenElement !== null) {
      fs = true;
} else {
      fs = false;
}


上面的代码，用于检测 document 是否处于元素级别的全屏显示状态，当存在元素处于全屏显示状态，那么， document.fullscreenElement 的值指向该元素本身（如<div id=...></div>），否则，null，所以，上面代码的主要任务是检测 document 是否存在全屏显示子元素的状况，并将值传给 fs 变量。

问题是，它在什么时候进行检测，是点击按钮的时候吗？不，这将行不通：全屏下浏览器对热键的绝对保护，致使很多信息拿不到。幸运的是，JS有一个 fullscreenchange 事件，上面的代码通过对这个事件的监听就可以拿到当前 document 现在是否处于全屏显示元素状态：

let fs = false;

document.addEventListener("fullscreenchange", () => {
      if(document.fullscreenElement !== null) {
                fs = true;
      } else {
                fs = false;
      }
});


剩下的事情就好办了：可以设定一个按钮，其 id 为我们设定的（如 id="btn888")，按钮单击操作针对其（id="papa"）的父元素。上面的变量 fs 是点击该按钮的依据：

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

其中：① exitFullscreen() 方法是基于 document 级别，它表示 document 退出全屏显示元素的状态；② requestFullscreen() 方法基于元素级别的，元素请求全屏显示，上例中，是 papa 这个元素请求进入全屏状态。

btn888 应该有按钮的字面名称，比如不是全屏时”进入全屏“、是全屏时”退出全屏“，这样才能营造友好的交互场面。这个处理机制放在对 document 的 fullscreenchange 监听事件里就好，对应 fs 的值来部署它。

一张图片，一个 div，都是可全屏显示的对象。二楼的例子是基于 div 的，它用一张图片做背景，看上去好像只是一张图片。

马黑黑 发表于 2022-12-21 17:06

本帖最后由 马黑黑 于 2022-12-22 07:31 编辑 <br /><br /><style>
#papa {
        margin: auto;
        padding: 10px;
        width: 740px;
        height: 540px;
        background: gray url('https://www.huachaowang.com/forum.php?mod=attachment&aid=NDM4MTJ8Y2JkM2FmZGJ8MTY3MTY2NTQxOHw3MTMwfDY1NDAz&noupdate=yes') 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 17:06

本帖最后由 马黑黑 于 2022-12-21 17:44 编辑

二楼效果完整代码<style>
#papa {
        margin: auto;
        padding: 10px;
        width: 740px;
        height: 540px;
        background: gray url('/forum.php?mod=attachment&aid=NDM4MTJ8YmI5ZTNlNTZ8MTY3MTYxNDI4OHw3MTMwfDY1NDAz&noupdate=yes') 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 17:18

<details>
<summary>资源</summary>

</details>

马黑黑 发表于 2022-12-21 17:48

二楼的效果，进入全屏后，如果按 Esc 键退出全屏，基于变量 fs 的操作逻辑不会受影响，正常运行。如果不做 fullscreenchange 监听，则很难应对 Esc 键加入后的逻辑处理。

上海朝阳 发表于 2022-12-21 18:59

全屏呀，我是学不会，而且，我上传图片也是被限制在500宽度以下，而我恰恰是喜欢诗图模式，所以我很少在花潮发帖，一个图片缩小再缩小，屡次被限制，就放弃了。

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

漂亮！{:5_116:}

马黑黑 发表于 2022-12-21 19:16

上海朝阳 发表于 2022-12-21 18:59
全屏呀，我是学不会，而且，我上传图片也是被限制在500宽度以下，而我恰恰是喜欢诗图模式，所以我很少在花 ...

可以使用长传到别处的图片，我多数情况下这么做

马黑黑 发表于 2022-12-21 19:16

东篱闲人 发表于 2022-12-21 19:02
漂亮！

你的图根基好，可以一试

小辣椒 发表于 2022-12-21 20:32

全屏新的尝试好像黑黑已经定版了？

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

马黑黑 发表于 2022-12-21 19:16
你的图根基好，可以一试

这需要特大图片。才能清晰。。

马黑黑 发表于 2022-12-21 20:57

东篱闲人 发表于 2022-12-21 20:33
这需要特大图片。才能清晰。。

也不要特大，一般像素再1200*800左右吧，放大到全屏并无多少损失

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

JS还有“全屏元素”，真是无所不能啊{:4_187:}

马黑黑 发表于 2022-12-22 07:30

红影 发表于 2022-12-21 22:51
JS还有“全屏元素”，真是无所不能啊

JS为web而生，他已经 2022-1994=28 岁了，不能没啥本事吧{:4_173:}

马黑黑 发表于 2022-12-22 07:32

小辣椒 发表于 2022-12-21 20:32
全屏新的尝试好像黑黑已经定版了？

解决了逻辑问题。至于一些细节的安置，因人、因帖子布局而定

红影 发表于 2022-12-22 14:05

马黑黑 发表于 2022-12-22 07:30
JS为web而生，他已经 2022-1994=28 岁了，不能没啥本事吧

正是青壮年时候呢{:4_173:}

马黑黑 发表于 2022-12-22 17:18

红影 发表于 2022-12-22 14:05
正是青壮年时候呢

就是。昨天看了一篇文章，说的是为什么JS会成为最受欢迎的语言。作者不解，觉得JS理论上不伦不类，却拥有那么多的使用者，并受到很多程序员的青睐。其实，JS就是因为不伦不类才受欢迎。它属于宽松类型变量的语言，变量类型不严谨，可以自由自在声明和赋值。此外，它对运行环境没有什么特别的要求，不需要运行库，有浏览器或浏览器内核就可以运行，写完就用，无需编译、打包。

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

马黑黑 发表于 2022-12-22 17:18
就是。昨天看了一篇文章，说的是为什么JS会成为最受欢迎的语言。作者不解，觉得JS理论上不伦不类，却拥有 ...

这个学会真不错啊，特别自由的感觉。

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

红影 发表于 2022-12-22 21:09
这个学会真不错啊，特别自由的感觉。

约束少一些，挺好

红影 发表于 2022-12-23 11:12

马黑黑 发表于 2022-12-22 21:35
约束少一些，挺好

那也要熟练掌握的人才行，我这样的，也不行啊。

查看完整版本: 全屏帖子的实现方法