fscreen模块：更方便的全屏切换插件
fscreen.js 以新的方式封装成ES6模块，较之之前的全屏插件封装，在易用性、简洁性方面更为理想。在JS代码层面，只需两个语句便可实现全屏功能的应用：
<script type="module">
import fscreen from 'https://638183.freep.cn/638183/web/mod/fscreen.js';
fscreen.fs('tz', 'btnFs');
</script>
要点：
① 注意<script>标签内的type="module"属性及属性值，这是使用模块的关键点之一，缺它浏览器不认。
② import 语句，引入模块指令，fscreen是自己定义的模块副本名称，可以使用自己希望的字眼，比如qp也是可以的。from关键字表示引用的模块来自何处，要求是具体的模块地址。
③ 用自己命名的模块副本作为执行者去运行 fs() 指令构建全屏按钮、实现切换机制，fscreen.fs('tz', 'btnFs');或qp.sf('tz', 'btnFs'); 都行，对应上第 ② 步的名称即可。fs() 指令需要两个参数，都是元素的id，用小角引号分别将其包裹起来：一个是要设置可以全屏呈现的元素（比如帖子的容器），另一个是切换全屏的按钮。
* 补充说明一下全屏切换按钮，建议使用 div、span、p 等HTML元素，需要自己设计样式。fscreen模块会给按钮动态改变内部文本，共四个字。
下面给一个应用实例，代码附后：
代码：
<style>
#tz {
margin: auto;
width: 800px;
height: 400px;
background: url('https://638183.freep.cn/638183/t22/webp/dmxf1.webp') no-repeat center/cover;
position: relative;
}
#btnFs {
position: absolute;
left: 48%;
top: 20px;
padding: 6px;
background: green;
color: white;
border: 2px solid white;
border-radius: 8px;
cursor: pointer;
user-select: none;
}
</style>
<div id="tz">
<span id="btnFs"></span>
</div>
<script type="module">
import qp from 'https://638183.freep.cn/638183/web/mod/fscreen.js';
qp.fs('tz','btnFs');
</script>
前一篇: svgdrawer滤镜指令应用举例（一）
下一篇: audio插件使用指南
发表评论:
评论列表 [2条]
#2 | 飞飞 于 2024-10-31 15:02 发布: type="module"这个很关键，是引用成功的前提。
#1 | 悄然 于 2024-10-31 14:38 发布: 这个全屏按纽的设置在上方。。。JS部分只有两行也是够简洁。。看着舒适又好懂。。
