全屏插件使用说明及示例

评论资讯 [ 总 12 则 ]

友情链接

网站统计

·前端三套件 : 180
·JS插件 : 68
·黑石音画 : 514
·代码集锦 : 78
·小工具集合 : 31
·网友作品精选 : 9
·svgdr : 26
·杂记 : 4

·今日访问 : 296
·页面点击 : 296
·当前在线 : 4

全屏插件使用说明及示例

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

效果

<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>

/* 引用插件 */

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'});

发表评论:

评论列表 [0条]