全屏帖子插件
本帖最后由 马黑黑 于 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>
<style>
#papa { margin: 0 0 0 calc(50% - 593px); width: 1024px; height: 640px; background: linear-gradient(to right bottom,tan,black); box-shadow: 3px 3px 20px #000; position: relative; z-index: 1; }
</style>
<div id="papa"></div>
<script>
(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;',
});
</script>
这个单独打包的好，可以为以前没做全屏的帖子加个全屏插件了{:4_199:} 我以一个观众的身份，前来捧个人场。 黑黑全屏的插件也是出来了{:4_199:} 红影 发表于 2023-1-31 13:50
这个单独打包的好，可以为以前没做全屏的帖子加个全屏插件了
对，任何帖子或者自己的web页需要全屏的，都可以 小辣椒 发表于 2023-1-31 16:44
黑黑全屏的插件也是出来了
其实这个早就出来了的，我没有单独发而已 庶民来了 发表于 2023-1-31 15:41
我以一个观众的身份，前来捧个人场。
{:5_108:} 马黑黑 发表于 2023-1-31 17:05
其实这个早就出来了的，我没有单独发而已
我今天不能看文字，看屏幕会头晕{:4_198:}
今天也是做不了帖 小辣椒 发表于 2023-1-31 17:08
我今天不能看文字，看屏幕会头晕
今天也是做不了帖
休息先吧 马黑黑 发表于 2023-1-31 17:09
休息先吧
只能看一下下，不能时间长 小辣椒 发表于 2023-1-31 17:10
只能看一下下，不能时间长
调养好了再说 马黑黑 发表于 2023-1-31 17:05
对，任何帖子或者自己的web页需要全屏的，都可以
这个很细致，黑黑真棒{:4_187:} 红影 发表于 2023-1-31 20:37
这个很细致，黑黑真棒
一般般 马黑黑 发表于 2023-1-31 20:38
一般般
很实用{:4_187:} 红影 发表于 2023-1-31 20:57
很实用
有需求它就实用 马黑黑 发表于 2023-1-31 20:58
有需求它就实用
随时随地能派上用途，就是实用呀。 红影 发表于 2023-1-31 21:19
随时随地能派上用途，就是实用呀。
不一定。全屏不是刚需。 马黑黑 发表于 2023-1-31 21:47
不一定。全屏不是刚需。
反正有这个就是好，需要用的时候知道可以找得到{:4_173:} 红影 发表于 2023-1-31 22:16
反正有这个就是好，需要用的时候知道可以找得到
那倒也是