请马上登录，朋友们都在花潮里等着你哦：）
您需要 登录 才可以下载或查看，没有账号？立即注册
x
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>
| 
发表于 2024-10-31 11:59
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡
楼主
发表于 2024-10-31 14:40
发表于 2024-10-31 20:27
