fsgo测试

马黑黑

Message Box

进入全屏

马黑黑

《紫色》一帖，使用 fsgo 实现，小播可以响应鼠标指针在帖子内外的悬停动作（0.4秒有响应），小播的活动范围限制在帖子范围内。本地复杂环境测试通过，在站点上测试通过。但在Discuz!3.4环境下测试通过，在在花潮论坛水土不服，需要将实际代码拿来测试，因此有本帖。

fsgo的中，fs是全屏，这已经经过考验了，不说；go是小播游荡，实现思路是酱紫：

在 document 的 mousemove 事件时间中获取 e.pageX 和 e.pageY 坐标点，它们是基于浏览器window即浏览区域左上角的；通过 element.getBoundingRect() 方法获取帖子的左、上边缘偏移数据；再通过 element.clientWidth/Height 获取会动态变化的帖子宽高（正常和全屏模式间的变化）。这些数据拿到后，设计一套计算方法，用以驱使小播的 left 和 top 值使之相应鼠标指针的悬停和手机上的点按动作。

在设计之时，觉得理论上不成问题，写完测试，确实可以正常工作，效果与预期的一致。唯独到了这里，在全屏模式，e.pageX/Y 所获得的鼠标点数据不正确，坐标系仍是使用非全屏状态下的坐标系，这相当没有道理，具体原因不明，估计是相对老旧版本的一个bug。

那么，fsgo要入驻花潮，就需要修改一下。方法简单，获取点坐标数据时区分正常模式和全屏模式，正常显示模式下用 e.pageX/Y，全屏模式用 e.offsetX/Y 加兼容Firefox的 e.layerX/Y，本帖就是测试这个，感谢大家帮忙验证。

马黑黑

一楼代码

<style> #papa { margin: 30px 0 0 calc(50% - 593px); width: 1024px; height: 640px; background: url('https://638183.freep.cn/638183/t24/1/purple.jpg') no-repeat center/cover; box-shadow: 3px 3px 20px #000; position: relative; z-index: 1000; } #btnplay { position: absolute; left: 10px; top: 10px; width: 80px; height: 80px; transition: 5s; cursor: pointer; opacity: .9; animation: rot 6s linear infinite; } #papa:fullscreen #btnplay { width: 120px; height: 120px; } #btnFs { position: absolute; bottom: 10px; left: 48%; color: white; background: transparent; border: 2px solid white; border-radius: 6px; padding: 4px; transition: opacity 1s; cursor: pointer; opacity: 0; z-index: 10; } #msg22 { margin: 40px; color: white; padding: 50px; } @keyframes rot { to { transform: rotate(360deg); } } </style>   <div id="papa">     <div id="msg22">Message Box</div>     <div id="btnFs">进入全屏</div>     <img id="btnplay" src="https://638183.freep.cn/638183/small/purple.png" alt="" title="测试按钮" /> </div>   <script>   let go = {x: true, y: true},     timerId = null,     movTimer = null,     fs = false,     rect = papa.getBoundingClientRect();   papa.addEventListener('mousemove', () => {     clearTimeout(timerId);     btnFs.style.opacity = '1';     timerId = setTimeout('btnFs.style.opacity = "0"', 3000); });   document.addEventListener('fullscreenchange', () => {     if (document.fullscreenElement !== null) {         fs = true;         btnFs.innerText = '退出全屏';     } else {         fs = false;         btnFs.innerText = '进入全屏';     } });   let correctPos = (son) => {     let left = parseInt(son.style.left), top = parseInt(son.style.top);     if(left < 0) left = 0;     if(top < 0) top = 0;     if(left + son.clientWidth > papa.clientWidth) left = papa.clientWidth - son.clientWidth;     if(top + son.clientHeight > papa.clientHeight) top = papa.clientHeight - son.clientHeight;     son.style.left = left + 'px';     son.style.top = top + 'px'; };   document.onmousemove = function(e) {     if(e.target.id === 'btnplay') return;     clearTimeout(movTimer);     let x, y;     movTimer = setTimeout(function() {         if(document.fullscreenElement && e.target.id.toUpperCase() === 'BTNFS') return;         x = document.fullscreenElement ? e.offsetX || e.layer.x : e.pageX - rect.x;         y = document.fullscreenElement ? e.offsetY || e.layer.y : e.pageY - rect.y;         let left = go.x === true ? x + 'px'span>: '', top = go.y === true ? y + 'px' : '';         btnplay.style.cssText += `left: ${left}; top: ${top};`;         msg22.innerText = `x: ${x} / left: ${left}\ny: ${y} / top: ${top}\npapa: ${papa.clientWidth} / ${papa.clientHeight}`;         correctPos(btnplay);     }, 400); }; btnFs.onclick = () => fs ? document.exitFullscreen() : papa.requestFullscreen();   </script>

南无月

测试反馈，全屏模式下小花也跟着鼠标移动，并且完到达鼠标所在位置。。

南无月

这个鼠标点不同的地方，数字坐标也会随着变化，太高级了。。

马黑黑

南无月 发表于 2024-3-15 18:10
这个鼠标点不同的地方，数字坐标也会随着变化，太高级了。。

那是验证用

马黑黑

南无月 发表于 2024-3-15 18:09
测试反馈，全屏模式下小花也跟着鼠标移动，并且完到达鼠标所在位置。。

红影

试了一下，按钮在全屏和非全屏状态下，都是完美响应鼠标。
只是在退出全屏时，有按钮溢出背景的瞬间。别的都没问题

马黑黑

红影 发表于 2024-3-15 21:26
试了一下，按钮在全屏和非全屏状态下，都是完美响应鼠标。
只是在退出全屏时，有按钮溢出背景的瞬间。别的 ...

切换时按钮从外面归位，这是正常的

南无月

马黑黑 发表于 2024-3-15 20:33

紫色全屏问题已完美解决~~

南无月

马黑黑 发表于 2024-3-15 20:32
那是验证用

跟科幻片里的外星人角度看到人类，屏幕上出现的参数似的。。

南无月

马黑黑 发表于 2024-3-15 20:33

这个是第二个方案。。。已有第三个方案代替。。
这解决问题的能力，简直了。。多角度多种思维。。
你真是我偶像，佩服的五体投地。。

马黑黑

南无月 发表于 2024-3-16 17:03
这个是第二个方案。。。已有第三个方案代替。。
这解决问题的能力，简直了。。多角度多种思维。。
你真 ...

大小上课爱开小差的人歪主意就是多

马黑黑

南无月 发表于 2024-3-16 16:33
跟科幻片里的外星人角度看到人类，屏幕上出现的参数似的。。

我只验证几个关键数据，还有更多的数据也应验证，我心中有数就算了

马黑黑

南无月 发表于 2024-3-16 16:31
紫色全屏问题已完美解决~~

南无月

马黑黑 发表于 2024-3-16 17:09
大小上课爱开小差的人歪主意就是多

小时候咋这么可爱捏。。。

马黑黑

南无月 发表于 2024-3-16 17:19
小时候咋这么可爱捏。。。

注意力不集中，因为老师教的东东太容易

南无月

马黑黑 发表于 2024-3-16 17:10
我只验证几个关键数据，还有更多的数据也应验证，我心中有数就算了

关键数据给大家看，勉强能看懂。。。
有些数心里看。。估计是想整出来小白也看不懂。

南无月

马黑黑 发表于 2024-3-16 17:10

每次更新换代，不超过24小时的节奏 。

马黑黑

南无月 发表于 2024-3-16 17:21
每次更新换代，不超过24小时的节奏 。

那也不是，看看有木有空还有烟酒