评论资讯 [ 总 421 则 ]
·悄然 - 2024-12-9 12:32
·飞飞 - 2024-12-9 12:31
·小希 - 2024-12-7 11:50
·飞飞 - 2024-12-5 15:53
·飞飞 - 2024-12-3 16:42
·悄然 - 2024-12-3 16:41
·飞飞 - 2024-12-1 18:27
·小白 - 2024-12-1 12:39
·飞 - 2024-11-30 19:01
·小白 - 2024-11-29 19:51
·飞飞 - 2024-12-9 12:31
·小希 - 2024-12-7 11:50
·飞飞 - 2024-12-5 15:53
·飞飞 - 2024-12-3 16:42
·悄然 - 2024-12-3 16:41
·飞飞 - 2024-12-1 18:27
·小白 - 2024-12-1 12:39
·飞 - 2024-11-30 19:01
·小白 - 2024-11-29 19:51
友情链接
网站统计
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部分只有两行也是够简洁。。看着舒适又好懂。。