花潮版fsgo小播鼠标跟随插件
本帖最后由 马黑黑 于 2024-3-16 11:52 编辑 <br /><br /><style>.pa { font: normal 18px/24px sans-serif; }
.pa p { margin: 16px; }
.mum { position: relative; margin: 0; padding: 10px; font: normal 16px/24px 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>
<div class="pa">
<p>fsgo.js 是在做《霓虹》系列帖子差不多结束时封装的一个音视频同步控制+全屏+播放控制器响应鼠标悬停事件的一个小插件。插件在本地、本地虚拟论坛、自家网站上测试通过，但在花潮论坛的表现不尽人意，主要问题是帖子全屏时小播跟随鼠标悬停位置不准确。</p>
<p>经反复尝试、分析，原因大致找到，应是插件与 Discuz! X3.2 论坛程序某个机制有冲突，在该机制的影响下，帖子处于全屏状态时，获取到的 event.pageY 鼠标纵向页面坐标点与预期相差甚远。解决这一问题有几个方案，昨晚尝试的一个成功方案是按帖子正常显示模式和全屏显示模式分别获取鼠标悬停0.4秒后的坐标点，正常模式取页面坐标点 pageX/Y 的数据，全屏模式取偏移 offsetX/Y || layer.x/y 坐标点数据，此法可行但也会存在一个复杂问题，就是偏移坐标点数据会受到帖子子元素UI的影响，复杂布局的帖子实现功能的计算量会很大；今天早上尝试另外一个方案，在 fsgo 通用版的基础上加入一个判断，若帖子进入全屏，则采用 event.clientY 获取鼠标悬停时的垂直坐标点数据，这是基于客户断区域的，全屏模式下帖子的左边、上边紧贴浏览器window区域的左边、上边，clientX/Y 拿到的数据正好符合要求，所以，最后决定，花潮版的 fsgo 采用今天测试成功的方案。</p>
<p>下面是插件的引用与配置示例：</p>
<div class='mum'>
<cl-cd data-idx="1">(<span class="tBlue">function</span>() {</cl-cd>
<cl-cd data-idx="2"> <span class="tBlue">let</span> sF = <span class="tRed">document</span>.createElement(<span class="tMagenta">'script'</span>);</cl-cd>
<cl-cd data-idx="3"> sF.src = <span class="tMagenta">'https://638183.freep.cn/638183/web/api/fsgo_hc.js'</span>;</cl-cd>
<cl-cd data-idx="4"> sF.charset = <span class="tMagenta">'utf-8'</span>;</cl-cd>
<cl-cd data-idx="5"> <span class="tRed">document</span>.querySelector(<span class="tMagenta">'body'</span>).appendChild(sF);</cl-cd>
<cl-cd data-idx="6"> sF.onload = () => FS({</cl-cd>
<cl-cd data-idx="7"> <span class="tBlue">papa:</span> <span class="tMagenta">'#papa'</span>,</cl-cd>
<cl-cd data-idx="8"> <span class="tBlue">css:</span> <span class="tMagenta">'<span class="tBlue">--bg:</span> transparent; <span class="tBlue">--color:</span> #eee; <span class="tBlue">bottom:</span> 10px; <span class="tBlue">left:</span> 48%;'</span>,</cl-cd>
<cl-cd data-idx="9"> <span class="tBlue">go:</span> {<span class="tBlue">x:</span> true, <span class="tBlue">y:</span> true}</cl-cd>
<cl-cd data-idx="10"> });</cl-cd>
<cl-cd data-idx="11">})();</cl-cd>
</div>
<p>以下是插件对帖子制作的相关约定：</p>
<div class='mum'>
<cl-cd data-idx="1"><span class="tGreen"><!-- 帖子容器元素需要有 <span class="tRed">id</span> 且在配置FS({})时给出该 <span class="tRed">id</span> 的CSS选择器名 #daddy --></span></cl-cd>
<cl-cd data-idx="2"><<span class="tDarkRed">div</span> <span class="tRed">id</span>=<span class="tMagenta">"daddy"</span>></cl-cd>
<cl-cd data-idx="3"> <span class="tGreen"><!-- 播放器不论是图片还是div，<span class="tRed">id</span> 是唯一的，如下：--></span></cl-cd>
<cl-cd data-idx="4"> <<span class="tDarkRed">div</span> <span class="tRed">id</span>=<span class="tMagenta">"btnplay"</span>><<span class="tDarkRed">/div</span>></cl-cd>
<cl-cd data-idx="5"><<span class="tDarkRed">/div</span>></cl-cd>
<cl-cd data-idx="6"> </cl-cd>
<cl-cd data-idx="7"><span class="tGreen">/* JS配置 FS({...}) 共三个参数 */</span></cl-cd>
<cl-cd data-idx="8">sF.onload = () => FS({</cl-cd>
<cl-cd data-idx="9"> <span class="tBlue">papa:</span> <span class="tMagenta">'#daddy'</span>, <span class="tGreen">/* 配置帖子容器元素<span class="tRed">id</span>（CSS选择器名称）*/</span></cl-cd>
<cl-cd data-idx="10"> <span class="tGreen">/* 配置全屏按钮背景色、前景色和位置 ：四个属性一同设置。若使用默认配置，下行不要 */</span></cl-cd>
<cl-cd data-idx="11"> <span class="tBlue">css:</span> <span class="tMagenta">'<span class="tBlue">--bg:</span> transparent; <span class="tBlue">--color:</span> #eee; <span class="tBlue">bottom:</span> 10px; <span class="tBlue">left:</span> 48%;'</span>,</cl-cd>
<cl-cd data-idx="12"> <span class="tBlue">go:</span> {<span class="tBlue">x:</span> true, <span class="tBlue">y:</span> true} <span class="tGreen">/* 鼠标跟随方向，true 跟随，false 不跟随 */</span></cl-cd>
<cl-cd data-idx="13">});</cl-cd>
</div>
<p>最后提一下，花潮版的 fsgo 小插件同样适用于其他环境，我在纯净环境下测试过通过，理论上，其他正常的环境下也不会有问题。</p>
</div> 《霓虹·紫色》一帖已经改用花潮版的 fsgo 插件，大家可以验证一下（可能需要硬刷新+软刷新才能看都效果）：
紫色 - 音乐沙龙 - 花潮论坛 - Powered by Discuz! (huachaowang.com)
黑黑辛苦，精益求精，不断进取，成绩斐然，让人敬佩{:4_187:} 马黑黑 发表于 2024-3-16 11:55
《霓虹·紫色》一帖已经改用花潮版的 fsgo 插件，大家可以验证一下（可能需要硬刷新+软刷新才能看都效果） ...
效果完美。。。{:4_187:} 最后提一下，花潮版的 fsgo 小插件同样适用于其他环境，我在纯净环境下测试过通过，理论上，其他正常的环境下也不会有问题。
那我做的贴子就直接使用这个fsgo_hc.js插件好了。。{:4_199:} 路线对了，就在细点上狠下功夫。{:4_190:} 今天早上尝试另外一个方案，在 fsgo 通用版的基础上加入一个判断，若帖子进入全屏，则采用 event.clientY 获取鼠标悬停时的垂直坐标点数据，这是基于客户断区域的，全屏模式下帖子的左边、上边紧贴浏览器window区域的左边、上边，clientX/Y 拿到的数据正好符合要求
原来这是第三个方案了。。{:4_199:} 经测试，尺寸不同的贴子一样完美显示。。黑神太帅！{:4_173:} 南无月 发表于 2024-3-16 17:05
经测试，尺寸不同的贴子一样完美显示。。黑神太帅！
我专门测试了安卓手机环境，还挺好的。不知果机如何 南无月 发表于 2024-3-16 17:01
今天早上尝试另外一个方案，在 fsgo 通用版的基础上加入一个判断，若帖子进入全屏，则采用 event.clientY...
兼容花潮环境，这个省事，另外它对浏览器的支持度没问题，在各种环境也能正常运行 樵歌 发表于 2024-3-16 17:00
路线对了，就在细点上狠下功夫。
是问题总要处理一下吧 小辣椒 发表于 2024-3-16 15:12
黑黑辛苦，精益求精，不断进取，成绩斐然，让人敬佩
果酱果酱 马黑黑 发表于 2024-3-16 17:07
我专门测试了安卓手机环境，还挺好的。不知果机如何
我去试试呀，一会给你反馈 马黑黑 发表于 2024-3-16 17:08
兼容花潮环境，这个省事，另外它对浏览器的支持度没问题，在各种环境也能正常运行
这个第三代的研发堪称完美了{:4_199:}我去到处试试 南无月 发表于 2024-3-16 17:13
这个第三代的研发堪称完美了我去到处试试
{:4_172:} 南无月 发表于 2024-3-16 17:11
我去试试呀，一会给你反馈
好 马黑黑 发表于 2024-3-16 17:19
真去试了，好用的很。通用呀，就用这稿了。。。{:4_199:} 马黑黑 发表于 2024-3-16 17:19
好
看下留言。 南无月 发表于 2024-3-16 17:42
真去试了，好用的很。通用呀，就用这稿了。。。
也成 南无月 发表于 2024-3-16 17:42
看下留言。
已经回复