全屏插件使用说明及示例
本帖最后由 马黑黑 于 2024-3-5 23:21 编辑 <br /><br /><style>#mybox {
margin: auto;
width: 760px;
height: 420px;
background: url('https://638183.freep.cn/638183/t24/jpg/dysonstar.jpg') no-repeat center/cover;
position: relative;
}
.mum { position: relative; margin: 0; padding: 10px; font: normal 16px/20px Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; color: black; background: rgba(240, 240, 240,.95); box-shadow: 2px 2px 4px gray; border: thick groove lightblue; border-radius: 6px; }
.mum ::selection { background-color: rgba(0,100,100,.35); }
.mum div { margin: 0; padding: 0; }
.mum cl-cd { display: block; position: relative; margin: 0 0 0 50px; padding: 0 0 0 10px; white-space: pre-wrap; overflow-wrap: break-word; border-left: 1px solid silver; }
.mum cl-cd::before { position: absolute; content: attr(data-idx); width: 50px; color: gray; text-align: right; transform: translate(-70px); }
.tRed { color: red; }
.tBlue { color: blue; }
.tGreen { color: green; }
.tDarkRed { color: darkred; }
.tMagenta { color: magenta; }
</style>
<h2>效果</h2>
<div id="mybox"></div>
<h2>代码</h2>
<div class='mum'>
<cl-cd data-idx="1"><<span class="tDarkRed">style</span>></cl-cd>
<cl-cd data-idx="2"><span class="tGreen">/* 全屏对象选择器 ：名称随意，JS配置时注意使用相同名称 */</span></cl-cd>
<cl-cd data-idx="3">#mybox {</cl-cd>
<cl-cd data-idx="4"> <span class="tBlue">margin:</span> auto;</cl-cd>
<cl-cd data-idx="5"> <span class="tBlue">width:</span> 800px;</cl-cd>
<cl-cd data-idx="6"> <span class="tBlue">height:</span> 460px;</cl-cd>
<cl-cd data-idx="7"> <span class="tBlue">background:</span> url(<span class="tMagenta">'https://638183.freep.cn/638183/t24/jpg/dysonstar.jpg'</span>) no-repeat center/cover;</cl-cd>
<cl-cd data-idx="8"> <span class="tBlue">position:</span> relative; <span class="tGreen">/* 定位 ：必须，否则全屏按钮不听使唤 */</span></cl-cd>
<cl-cd data-idx="9">}</cl-cd>
<cl-cd data-idx="10"><<span class="tDarkRed">/style</span>></cl-cd>
<cl-cd data-idx="11"> </cl-cd>
<cl-cd data-idx="12"><<span class="tDarkRed">div</span> <span class="tRed">id</span>=<span class="tMagenta">"mybox"</span>><<span class="tDarkRed">/div</span>></cl-cd>
<cl-cd data-idx="13"> </cl-cd>
<cl-cd data-idx="14"><<span class="tDarkRed">script</span>></cl-cd>
<cl-cd data-idx="15"> <span class="tGreen">/* 引用插件 */</span></cl-cd>
<cl-cd data-idx="16"> <span class="tBlue">let</span> sF = <span class="tRed">document</span>.createElement(<span class="tMagenta">'script'</span>);</cl-cd>
<cl-cd data-idx="17"> sF.src = <span class="tMagenta">'https://638183.freep.cn/638183/web/api/fullscreen.js'</span>;</cl-cd>
<cl-cd data-idx="18"> sF.charset = <span class="tMagenta">'utf-8'</span>;</cl-cd>
<cl-cd data-idx="19"> <span class="tRed">document</span>.querySelector(<span class="tMagenta">'body'</span>).appendChild(sF);</cl-cd>
<div class="tGreen"><cl-cd data-idx="20"> /* 配置全屏按钮</cl-cd>
<cl-cd data-idx="21"> papa - 必须，指定全屏对象，也是全屏按钮的容器</cl-cd>
<cl-cd data-idx="22"> css - 可选，若配置，需要配齐例中的四个属性，其中：--color 前景色即边框颜色，--fsBg 背景 */</cl-cd></div>
<cl-cd data-idx="23"> sF.onload = () => FS({</cl-cd>
<cl-cd data-idx="24"> <span class="tBlue">papa:</span> <span class="tMagenta">'#mybox'</span>,</cl-cd>
<cl-cd data-idx="25"> <span class="tBlue">css:</span> <span class="tMagenta">'<span class="tBlue">left:</span> 20px; <span class="tBlue">top:</span> 20px; <span class="tBlue">--color:</span> green; <span class="tBlue">--fsBg:</span> #eee;'</span>,</cl-cd>
<cl-cd data-idx="26"> });</cl-cd>
<cl-cd data-idx="27"><<span class="tDarkRed">/script</span>></cl-cd>
</div>
<p><br>配置中如果不配置 css 参数，配置FS的代码可以非常简短：<br><br></p>
<div class='mum'>
<cl-cd data-idx="1">sF.onload = () => FS({<span class="tBlue">papa:</span> <span class="tMagenta">'#mybox'</span>});</cl-cd>
</div>
<p><br><br></p>
<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);
sF.onload = () => FS({
papa: '#mybox',
css: 'left: 20px; top: 20px; --color: green; --fsBg: #eee;',
});
</script>
全屏对象，指需要全屏显示的元素，对于一楼介绍的插件而言，它应该是一个容器元素。
所谓容器元素，就是能装载子元素的元素，比如，最常用的 div 元素：
<div id="tiezi">内容</div>
但是，像 img、video 等这类媒体元素，它们不能充当容器，仅用于媒体展示，它们也可以使用全屏功能，只是没处安放全屏开关按钮，所以，一楼提供的全屏插件不支持它们。 省掉CSS代码差这么多。。
我得去试下，看看如何同页多次发布。 南无月 发表于 2024-3-6 18:08
省掉CSS代码差这么多。。
我得去试下，看看如何同页多次发布。
简单简单 马黑黑 发表于 2024-3-6 18:16
简单简单
{:4_173:}会者不难。。还没试。 南无月 发表于 2024-3-7 17:27
会者不难。。还没试。
试试就知道有多简单 马黑黑 发表于 2024-3-7 18:08
试试就知道有多简单
今天要记得去试试{:4_173:} 南无月 发表于 2024-3-8 17:55
今天要记得去试试
应该的 马黑黑 发表于 2024-3-8 19:27
应该的
我应该试完再来回的 试过回来反馈：
同页发了四贴，后面三贴都用去掉CSS代码，发出来就跟原贴一样一样。。但同页不受任何影响。。
这个十分顺手，很赞。。{:4_199:} 南无月 发表于 2024-3-8 21:30
试过回来反馈：
同页发了四贴，后面三贴都用去掉CSS代码，发出来就跟原贴一样一样。。但同页不受任何影响 ...
这是正常的。同一页里的CSS设置，HTML的class属性的可以反复使用 南无月 发表于 2024-3-8 20:59
我应该试完再来回的
要得 马黑黑 发表于 2024-3-8 21:44
这是正常的。同一页里的CSS设置，HTML的class属性的可以反复使用
试完感觉就是，厉害。。
代码世界这么神它怎么知道的。。
老师着实了不起。。
南无月 发表于 2024-3-9 17:06
试完感觉就是，厉害。。
代码世界这么神它怎么知道的。。
这是HTML和CSS的规范。
id 原则上一个web页只有一个，class可以随意 马黑黑 发表于 2024-3-9 18:36
这是HTML和CSS的规范。
id 原则上一个web页只有一个，class可以随意
{:4_173:}好哒，还是CSS和HTML的事。。代码的世界就是跟谜一样。。 南无月 发表于 2024-3-10 17:20
好哒，还是CSS和HTML的事。。代码的世界就是跟谜一样。。
开始会觉得如此，掌握了，就不神秘了 马黑黑 发表于 2024-3-10 17:38
开始会觉得如此，掌握了，就不神秘了
老师开始也觉得它神秘么。还是直接看了就会。。{:4_173:} 南无月 发表于 2024-3-10 17:44
老师开始也觉得它神秘么。还是直接看了就会。。
没有天生会的 马黑黑 发表于 2024-3-10 17:48
没有天生会的
回答的一点也不神秘{:4_170:} 南无月 发表于 2024-3-10 17:58
回答的一点也不神秘
俺这人本来就不神秘
页:
[1]
2