Lost in Time

马黑黑 · 发表于 2024-3-7 13:01

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由马黑黑于 2024-3-7 13:46 编辑

马黑黑 · 发表于 2024-3-7 13:01

本帖最后由马黑黑于 2024-3-7 13:47 编辑

帖子代码

<style>

#papa { margin: 0 0 0 calc(50% - 593px); width: 1024px; height: 640px; background:url('https://638183.freep.cn/638183/t24/1/lost.jpg') no-repeat center/cover; box-shadow: 3px 3px 20px #000; transition: filter 1s; position: relative; z-index: 1; }

#papa:hover { filter: brightness(1.2); }

#player { position: absolute; left: 620px; top: 540px; width: 100px; border-radius: 50%; transition: 4s; cursor: pointer; animation: rot .5s infinite alternate var(--state); }

#vid { position: absolute; width: 100%; height: 100%; object-fit: cover; mix-blend-mode: screen; pointer-events: none; clip-path: polygon(0 0,80% 0,80% 20%,100% 20%,100% 100%,0 100%); }

@keyframes rot { to { transform: scale(.8); } }

</style>

</div>

(function() {

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: '#papa'});

let getOffsetPos = (ele) => {

let x = ele.offsetLeft, y = ele.offsetTop, pa = ele.offsetParent;

while(pa != null) {

x += pa.offsetLeft;

y += pa.offsetTop;

pa = pa.offsetParent;

}

return {x, y};

};

let mState = () => aud.paused

? (papa.style.setProperty('--state','paused'), vid.pause())

: (papa.style.setProperty('--state','running'), vid.play());

aud.onpause = () => mState();

aud.onplaying = () => mState();

player.onclick = () => aud.paused ? aud.play() : aud.pause();

let movTimer = null,

paWidth = papa.clientWidth,

paHeight = papa.clientHeight,

sonSize = player.clientWidth,

bodyWidth = document.body.clientWidth,

bodyHeight = document.body.clientHeight,

paOffset = {x: getOffsetPos(papa).x, y: getOffsetPos(papa).y};

document.onmousemove = function(e) {

clearTimeout(movTimer);

movTimer = setTimeout(function() {

if(e.target.id === "player") return;

if(document.fullscreenElement === null) {

let x = e.pageX, y = e.pageY;

if(x < paOffset.x) x = paOffset.x;

if(y < paOffset.y) y = paOffset.y;

x = x - paOffset.x;

y = y - paOffset.y;

if(x + sonSize >= paWidth) x = paWidth - sonSize;

if(y + sonSize >= paHeight) y = paHeight - sonSize;

player.style.cssText += `left: ${x}px; top: ${y}px`;

} else {

let xx = e.offsetX || e.layerX, yy = e.offsetY || e.layerY;

if(xx + sonSize > bodyWidth) xx -= sonSize;

if(yy + sonSize > bodyHeight) yy -= sonSize;

player.style.cssText += `left: ${xx}px; top: ${yy}px`;

}

}, 400);

};

})();

</script>

马黑黑 · 发表于 2024-3-7 13:01

本帖最后由马黑黑于 2024-3-7 13:10 编辑

与致敬女神节·知音 - 第3页 - 动画音画 - 花潮论坛 - Powered by Discuz! (huachaowang.com) 相比，这个：

① 播放控制器能够响应帖子外鼠标指针悬停动作；
② 加入了《知音》未作处理的全屏模式下的鼠标悬停响应机制。

本帖在新版Edg、Chromium、Firefox下测试通过，不知道其他较低内核的浏览器下表现如何。不支持IE。