马黑PHP整站系统

fscreen模块:更方便的全屏切换插件

位置: 首页 > JS插件[ 发布时间: 2024.10.31  作者: 马黑  阅读: 94 ]

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部分只有两行也是够简洁。。看着舒适又好懂。。

Copyright © 2023 All Right Reserved 马黑PHP文章管理整站系统v1.8
联系我们: gxblk@163.com