请马上登录，朋友们都在花潮里等着你哦：）
您需要 登录 才可以下载或查看，没有账号？立即注册
x
本帖最后由 马黑黑 于 2024-3-16 11:52 编辑
fsgo.js 是在做《霓虹》系列帖子差不多结束时封装的一个音视频同步控制+全屏+播放控制器响应鼠标悬停事件的一个小插件。插件在本地、本地虚拟论坛、自家网站上测试通过，但在花潮论坛的表现不尽人意，主要问题是帖子全屏时小播跟随鼠标悬停位置不准确。
经反复尝试、分析，原因大致找到，应是插件与 Discuz! X3.2 论坛程序某个机制有冲突，在该机制的影响下，帖子处于全屏状态时，获取到的 event.pageY 鼠标纵向页面坐标点与预期相差甚远。解决这一问题有几个方案，昨晚尝试的一个成功方案是按帖子正常显示模式和全屏显示模式分别获取鼠标悬停0.4秒后的坐标点，正常模式取页面坐标点 pageX/Y 的数据，全屏模式取偏移 offsetX/Y || layer.x/y 坐标点数据，此法可行但也会存在一个复杂问题，就是偏移坐标点数据会受到帖子子元素UI的影响，复杂布局的帖子实现功能的计算量会很大；今天早上尝试另外一个方案，在 fsgo 通用版的基础上加入一个判断，若帖子进入全屏，则采用 event.clientY 获取鼠标悬停时的垂直坐标点数据，这是基于客户断区域的，全屏模式下帖子的左边、上边紧贴浏览器window区域的左边、上边，clientX/Y 拿到的数据正好符合要求，所以，最后决定，花潮版的 fsgo 采用今天测试成功的方案。
下面是插件的引用与配置示例：
(function() {
let sF = document.createElement('script');
sF.src = 'https://638183.freep.cn/638183/web/api/fsgo_hc.js';
sF.charset = 'utf-8';
document.querySelector('body').appendChild(sF);
sF.onload = () => FS({
papa: '#papa',
css: '--bg: transparent; --color: #eee; bottom: 10px; left: 48%;',
go: {x: true, y: true}
});
})();
以下是插件对帖子制作的相关约定：
<!-- 帖子容器元素需要有 id 且在配置FS({})时给出该 id 的CSS选择器名 #daddy -->
<div id="daddy">
<!-- 播放器不论是图片还是div，id 是唯一的，如下：-->
<div id="btnplay"></div>
</div>
/* JS配置 FS({...}) 共三个参数 */
sF.onload = () => FS({
papa: '#daddy', /* 配置帖子容器元素id（CSS选择器名称）*/
/* 配置全屏按钮背景色、前景色和位置 ：四个属性一同设置。若使用默认配置，下行不要 */
css: '--bg: transparent; --color: #eee; bottom: 10px; left: 48%;',
go: {x: true, y: true} /* 鼠标跟随方向，true 跟随，false 不跟随 */
});
最后提一下，花潮版的 fsgo 小插件同样适用于其他环境，我在纯净环境下测试过通过，理论上，其他正常的环境下也不会有问题。
| 
发表于 2024-3-16 11:47
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡
楼主
发表于 2024-3-16 16:51
