全屏插件使用说明及示例
位置:
首页 >
JS插件[发布: 2024.3.5 作者: 马黑 阅读: 121]
效果
代码
<style>
/* 全屏对象选择器 ：名称随意，JS配置时注意使用相同名称 */
#mybox {
margin: auto;
width: 800px;
height: 460px;
background: url('https://638183.freep.cn/638183/t24/jpg/dysonstar.jpg') no-repeat center/cover;
position: relative; /* 定位 ：必须，否则全屏按钮不听使唤 */
}
</style>
<div id="mybox"></div>
<script>
/* 引用插件 */
let sF = document.createElement('script');
sF.src = 'https://638183.freep.cn/638183/web/api/fullscreen.js';
sF.charset = 'utf-8';
document.querySelector('body').appendChild(sF);
/* 配置全屏按钮
papa - 必须，指定全屏对象，也是全屏按钮的容器
css - 可选，若配置，需要配齐例中的四个属性，其中：--color 前景色即边框颜色，--fsBg 背景 */
sF.onload = () => FS({
papa: '#mybox',
css: 'left: 20px; top: 20px; --color: green; --fsBg: #eee;',
});
</script>
配置中如果不配置 css 参数，配置FS的代码可以非常简短：
sF.onload = () => FS({papa: '#mybox'});
前一篇: 自由路径进度条播放器插件配置说明
下一篇: ball-lz.js使用说明
