介绍
lg-fullscreen 是一个基于 jQuery 的全屏插件，可用于在网页中实现全屏展示功能。该插件支持自定义样式，并提供多种事件回调函数，方便开发者进行二次开发。
安装
使用 npm 进行安装：
npm install lg-fullscreen
使用方法
引入
在 HTML 文件中引入 jQuery 和 lg-fullscreen 插件：
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script src="./node_modules/lg-fullscreen/dist/lg-fullscreen.min.js"></script>
基本用法
在需要全屏展示的元素上添加 data-lg-fullscreen 属性即可：
<div class="fullscreen" data-lg-fullscreen> <img src="./images/pic.jpg" alt="pic"> </div>
初始化插件：
$('.fullscreen').lgFullscreen();
此时，在点击该元素后，该元素将会全屏展示。
自定义样式
可以通过传递参数来自定义样式：
-- -------------------- ---- ------- ------------------------------- ------- ----- -- ------- ----- ---- ---------------- ------- -- -------- ---- ------------------ ---- -- --------- - ------------ ----- -- ------------ ---- ------------- --------------------- -- --------------------- ----------------- ---------- - ----------------------- --------- -- ------------------ ---------- - ----------------------- --------- - ---展开代码
事件回调
lg-fullscreen 插件提供了多种事件回调函数，方便开发者进行二次开发。
-- -------------------- ---- ------- ------------------------------- --- ----------------- ---------- - -- ------------ -- -- ------------------- ---------- - -- ------------ -- -- ------------------ ---------- - -- ------------ -- -- ------------------- ---------- - -- ------------ -- -- ------- ---------- - -- ----------- -- -- ---------- ---------- - -- ---------- -- - ---展开代码
示例代码
以下是一个完整的示例代码：
-- -------------------- ---- ------- --------- ----- ----- ------------- ------ ----- ---------------- -------------------- ------------ ------- ---------------------------------------------------------------------------- ------- ---------------------------------------------------------------------- ------- ----------- - ------ ------ ------- ------ --------- ------- --------- --------- ------- -------- - ----------- --- - ---------- ----- ----------- ----- - ----------- ------ - --------- --------- ---- ----- ------ ----- -------- ------ ------- -------- - -------- ------- ------ ---- ------------------ ------------------- ---- ---------------------- ---------- ---- --------------------- ------ -------- ------------------------------- ------- ----- ---------------- ------- ------------------ ---- ------------ ----- ------------- --------------------- ----------------- ---------- - ----------------------- --------- -- ------------------ ---------- - ----------------------- --------- - --- --------- ------- -------展开代码
总结
lg-fullscreen 插件是一个简单易用的全屏插件，具有自定义样式和多种事件回调
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/39414
