全屏帖子插件

马黑黑 · 发表于 2023-1-31 13:01

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由马黑黑于 2023-1-31 17:04 编辑

一、插件代码

(function(mkFS) {let setFullScreen = (user_set) => {let pa = user_set.pa;if(typeof(pa) !== 'object') return false;if(!user_set.set) user_set.set = 'color: snow; background: black; border: 2px solid snow; left: 40px; bottom: 40px;';btnMsg = document.createElement('span');btnMsg.style.cssText = `position: absolute; border-radius: 8px; padding: 4px; cursor: pointer; z-index:998; ${user_set.set}`;btnMsg.innerText = '全屏观赏';btnMsg.style.display = 'none';pa.appendChild(btnMsg);let timerId, fs = false;btnMsg.onclick = () => fs ? document.exitFullscreen() : pa.requestFullscreen();pa.addEventListener('mousemove', (e) => {clearTimeout(timerId);btnMsg.style.display = 'block';timerId = setTimeout('btnMsg.style.display = "none"', 3000);});document.addEventListener('fullscreenchange', () => {if (document.fullscreenElement !== null) {fs = true;btnMsg.innerText = '退出全屏';} else {fs = false;btnMsg.innerText = '全屏观赏';}});};mkFS.FS = setFullScreen;})(this);

复制代码

二、调用方法

FS({
pa: papa,
set: 'color: snow; background: green; border: 2px solid snow; left: 20px; top: 20px;',
});

复制代码

三、插件接口参数说明

（一）pa ：此参数设置帖子主体元素标识，比如说，帖子的父框有 id="mybox" ，则 pa 参数设置为 pa: mybox, 。假如没有id，请给帖子父框设置一个 id ；若父框是 classs = "mybox“，则可以这么处理：

<script>
let mybox = document.querySelector('.mybox'); //声明帖子父框标识
FS({
      pa: mybox,
      set: 'color: snow; background: green; border: 2px solid snow; left: 20px; top: 20px;',
});
</script>

（二）set ：如（一）中所举示例所示，set 参数用于配置全屏操作按钮样式，使用标准的 CSS 语句，CSS属性最好包含：

① color 按钮文本颜色；
② background 按钮背景色
③ border 按钮边框大小、风格及颜色
④ left / right 按钮水平位置
⑤ top / bottom  按钮垂直位置

四、其他

（一）因为按钮要追加到指定父元素之上，所以要求参数一 pa 必须为一个可做容器的元素，如 div，iframe 等，不能做容器的元素，如 img 之类的不可以，若强行用，全屏时按钮不可见。

（二）之前的没有提供全屏的播放器，可以加入这个插件，使用示例如下：

<script>
//这一行是播放器插件
//这一行是全屏插件

HCPlayer({
      //播放器相关参数设置
});

//下面是全屏参数配置
FS({
      pa: papa,
      set: 'color: snow; background: green; border: 2px solid snow; left: 20px; top: 20px;',
});

</script>