Lost in Time
本帖最后由 马黑黑 于 2024-3-7 13:46 编辑 <br /><br /><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 id="papa">
<img id="player" src="https://638183.freep.cn/638183/t22/51/tree_133167802617361953.jpg" alt="" />
<video id="vid" src="https://img.tukuppt.com/video_show/15653652/01/23/79/62204e70cf64d.mp4" loop muted></video>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=17961738" autoplay loop></audio>
</div>
<script>
(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:47 编辑 <br /><br /><style>
.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 class='mum'>
<cl-cd data-idx="1"><<span class="tDarkRed">style</span>></cl-cd>
<cl-cd data-idx="2"> #papa { <span class="tBlue">margin:</span> 0 0 0 calc(50% - 593px); <span class="tBlue">width:</span> 1024px; <span class="tBlue">height:</span> 640px; <span class="tBlue">background:</span>url(<span class="tMagenta">'https://638183.freep.cn/638183/t24/1/lost.jpg'</span>) no-repeat center/cover; <span class="tBlue">box-shadow:</span> 3px 3px 20px #000; <span class="tBlue">transition:</span> filter 1s; <span class="tBlue">position:</span> relative; <span class="tBlue">z-index:</span> 1; }</cl-cd>
<cl-cd data-idx="3"> #<span class="tBlue">papa:</span>hover { <span class="tBlue">filter:</span> brightness(1.2); }</cl-cd>
<cl-cd data-idx="4"> #player { <span class="tBlue">position:</span> absolute; <span class="tBlue">left:</span> 620px; <span class="tBlue">top:</span> 540px; <span class="tBlue">width:</span> 100px; <span class="tBlue">border-radius:</span> 50%; <span class="tBlue">transition:</span> 4s; <span class="tBlue">cursor:</span> pointer; <span class="tBlue">animation:</span> rot .5s infinite alternate <span class="tBlue">var</span>(--state); }</cl-cd>
<cl-cd data-idx="5"> #vid { <span class="tBlue">position:</span> absolute; <span class="tBlue">width:</span> 100%; <span class="tBlue">height:</span> 100%; <span class="tBlue">object-fit:</span> cover; <span class="tBlue">mix-blend-mode:</span> screen; <span class="tBlue">pointer-events:</span> none; <span class="tBlue">clip-path:</span> polygon(0 0,80% 0,80% 20%,100% 20%,100% 100%,0 100%); }</cl-cd>
<cl-cd data-idx="6"> @keyframes rot { to { <span class="tBlue">transform:</span> scale(.8); } }</cl-cd>
<cl-cd data-idx="7"><<span class="tDarkRed">/style</span>></cl-cd>
<cl-cd data-idx="8"> </cl-cd>
<cl-cd data-idx="9"><<span class="tDarkRed">div</span> <span class="tRed">id</span>=<span class="tMagenta">"papa"</span>></cl-cd>
<cl-cd data-idx="10"> <<span class="tDarkRed">img</span> <span class="tRed">id</span>=<span class="tMagenta">"player"</span> src=<span class="tMagenta">"https://638183.freep.cn/638183/t22/51/tree_133167802617361953.jpg"</span> alt=<span class="tMagenta">""</span> /></cl-cd>
<cl-cd data-idx="11"> <<span class="tDarkRed">video</span> <span class="tRed">id</span>=<span class="tMagenta">"vid"</span> src=<span class="tMagenta">"https://img.tukuppt.com/video_show/15653652/01/23/79/62204e70cf64d.mp4"</span> loop muted><<span class="tDarkRed">/video</span>></cl-cd>
<cl-cd data-idx="12"> <<span class="tDarkRed">audio</span> <span class="tRed">id</span>=<span class="tMagenta">"aud"</span> src=<span class="tMagenta">"https://music.163.com/song/media/outer/url?<span class="tRed">id</span>=17961738"</span> autoplay loop><<span class="tDarkRed">/audio</span>></cl-cd>
<cl-cd data-idx="13"><<span class="tDarkRed">/div</span>></cl-cd>
<cl-cd data-idx="14"> </cl-cd>
<cl-cd data-idx="15"><<span class="tDarkRed">script</span>></cl-cd>
<cl-cd data-idx="16">(<span class="tBlue">function</span>() {</cl-cd>
<cl-cd data-idx="17"> <span class="tBlue">let</span> sF = <span class="tRed">document</span>.createElement(<span class="tMagenta">'script'</span>);</cl-cd>
<cl-cd data-idx="18"> sF.src = <span class="tMagenta">'https://638183.freep.cn/638183/web/api/fullscreen.js'</span>;</cl-cd>
<cl-cd data-idx="19"> sF.charset = <span class="tMagenta">'utf-8'</span>;</cl-cd>
<cl-cd data-idx="20"> <span class="tRed">document</span>.querySelector(<span class="tMagenta">'body'</span>).appendChild(sF);</cl-cd>
<cl-cd data-idx="21"> sF.onload = () => FS({<span class="tBlue">papa:</span> <span class="tMagenta">'#papa'</span>});</cl-cd>
<cl-cd data-idx="22"> <span class="tBlue">let</span> getOffsetPos = (ele) => {</cl-cd>
<cl-cd data-idx="23"> <span class="tBlue">let</span> x = ele.offsetLeft, y = ele.offsetTop, pa = ele.offsetParent;</cl-cd>
<cl-cd data-idx="24"> <span class="tBlue">while</span>(pa != null) {</cl-cd>
<cl-cd data-idx="25"> x += pa.offsetLeft;</cl-cd>
<cl-cd data-idx="26"> y += pa.offsetTop;</cl-cd>
<cl-cd data-idx="27"> pa = pa.offsetParent;</cl-cd>
<cl-cd data-idx="28"> }</cl-cd>
<cl-cd data-idx="29"> <span class="tBlue">return</span> {x, y};</cl-cd>
<cl-cd data-idx="30"> };</cl-cd>
<cl-cd data-idx="31"> <span class="tBlue">let</span> mState = () => aud.paused</cl-cd>
<cl-cd data-idx="32"> ? (papa.style.setProperty(<span class="tMagenta">'--state'</span>,<span class="tMagenta">'paused'</span>), vid.pause())</cl-cd>
<cl-cd data-idx="33"> : (papa.style.setProperty(<span class="tMagenta">'--state'</span>,<span class="tMagenta">'running'</span>), vid.play());</cl-cd>
<cl-cd data-idx="34"> aud.onpause = () => mState();</cl-cd>
<cl-cd data-idx="35"> aud.onplaying = () => mState();</cl-cd>
<cl-cd data-idx="36"> player.onclick = () => aud.paused ? aud.play() : aud.pause();</cl-cd>
<cl-cd data-idx="37"> <span class="tBlue">let</span> movTimer = null,</cl-cd>
<cl-cd data-idx="38"> paWidth = papa.clientWidth,</cl-cd>
<cl-cd data-idx="39"> paHeight = papa.clientHeight,</cl-cd>
<cl-cd data-idx="40"> sonSize = player.clientWidth,</cl-cd>
<cl-cd data-idx="41"> bodyWidth = <span class="tRed">document</span>.body.clientWidth,</cl-cd>
<cl-cd data-idx="42"> bodyHeight = <span class="tRed">document</span>.body.clientHeight,</cl-cd>
<cl-cd data-idx="43"> paOffset = {<span class="tBlue">x:</span> getOffsetPos(papa).x, <span class="tBlue">y:</span> getOffsetPos(papa).y};</cl-cd>
<cl-cd data-idx="44"> <span class="tRed">document</span>.onmousemove = <span class="tBlue">function</span>(e) {</cl-cd>
<cl-cd data-idx="45"> clearTimeout(movTimer);</cl-cd>
<cl-cd data-idx="46"> movTimer = setTimeout(<span class="tBlue">function</span>() {</cl-cd>
<cl-cd data-idx="47"> <span class="tBlue">if</span>(e.target.<span class="tRed">id</span> === <span class="tMagenta">"player"</span>) <span class="tBlue">return</span>;</cl-cd>
<cl-cd data-idx="48"> <span class="tBlue">if</span>(<span class="tRed">document</span>.fullscreenElement === null) {</cl-cd>
<cl-cd data-idx="49"> <span class="tBlue">let</span> x = e.pageX, y = e.pageY;</cl-cd>
<cl-cd data-idx="50"> <span class="tBlue">if</span>(x < paOffset.x) x = paOffset.x;</cl-cd>
<cl-cd data-idx="51"> <span class="tBlue">if</span>(y < paOffset.y) y = paOffset.y;</cl-cd>
<cl-cd data-idx="52"> x = x - paOffset.x;</cl-cd>
<cl-cd data-idx="53"> y = y - paOffset.y;</cl-cd>
<cl-cd data-idx="54"> <span class="tBlue">if</span>(x + sonSize >= paWidth) x = paWidth - sonSize;</cl-cd>
<cl-cd data-idx="55"> <span class="tBlue">if</span>(y + sonSize >= paHeight) y = paHeight - sonSize;</cl-cd>
<cl-cd data-idx="56"> player.style.cssText += `<span class="tBlue">left:</span> ${x}px; <span class="tBlue">top:</span> ${y}px`;</cl-cd>
<cl-cd data-idx="57"> } <span class="tBlue">else</span> {</cl-cd>
<cl-cd data-idx="58"> <span class="tBlue">let</span> xx = e.offsetX || e.layerX, yy = e.offsetY || e.layerY;</cl-cd>
<cl-cd data-idx="59"> <span class="tBlue">if</span>(xx + sonSize > bodyWidth) xx -= sonSize;</cl-cd>
<cl-cd data-idx="60"> <span class="tBlue">if</span>(yy + sonSize > bodyHeight) yy -= sonSize;</cl-cd>
<cl-cd data-idx="61"> player.style.cssText += `<span class="tBlue">left:</span> ${xx}px; <span class="tBlue">top:</span> ${yy}px`;</cl-cd>
<cl-cd data-idx="62"> }</cl-cd>
<cl-cd data-idx="63"> }, 400);</cl-cd>
<cl-cd data-idx="64"> };</cl-cd>
<cl-cd data-idx="65">})();</cl-cd>
<cl-cd data-idx="66"><<span class="tDarkRed">/script</span>></cl-cd>
</div> 本帖最后由 马黑黑 于 2024-3-7 13:10 编辑
与 致敬女神节·知音 - 第3页 - 动画音画 - 花潮论坛 - Powered by Discuz! (huachaowang.com) 相比，这个：
① 播放控制器能够响应帖子外鼠标指针悬停动作；
② 加入了《知音》未作处理的全屏模式下的鼠标悬停响应机制。
本帖在新版Edg、Chromium、Firefox下测试通过，不知道其他较低内核的浏览器下表现如何。不支持IE。
哇塞，这个播放器效果可以自动的漂移 播放控制器能够响应帖子外鼠标指针悬停动作{:4_199:} 黑黑玩的效果越来越美了，更加多样化了 小辣椒 发表于 2024-3-7 13:16
哇塞，这个播放器效果可以自动的漂移
也不是自动。和《知音》差不多，只不过它能在帖子外围可以响应鼠标指针的悬停动作 马黑黑 发表于 2024-3-7 13:33
也不是自动。和《知音》差不多，只不过它能在帖子外围可以响应鼠标指针的悬停动作
我来不及测试了，本来想自己电脑做一个试试，先下了 小辣椒 发表于 2024-3-7 13:41
我来不及测试了，本来想自己电脑做一个试试，先下了
不急的慢慢来 “它能在帖子外围可以响应鼠标指针的悬停动作”
果然如此呢，而且跟全屏图标也不相冲了。
画面制作很是清爽舒服呢{:4_199:} 黑黑一直在不断钻研细节的东东，很赞{:4_199:} 红影 发表于 2024-3-7 15:46
“它能在帖子外围可以响应鼠标指针的悬停动作”
果然如此呢，而且跟全屏图标也不相冲了。
画面制作很是清 ...
感谢点评。
全屏时，鼠标指针悬停在全屏开关按钮会“驱逐”播放器按钮，非全屏是不会。这是特意设计的。 红影 发表于 2024-3-7 15:47
黑黑一直在不断钻研细节的东东，很赞
也不是一直，有心情的时候，比如钓鱼时，琢磨琢磨。杀猪时要全身投入，就不能思考这类问题了。 这个小播跟个小盆友似的。。。全屏状把小播引到边上~~退出全屏的时候，小播会在贴子外面慢吞吞跑贴子里来。{:4_173:} 南无月 发表于 2024-3-7 17:44
这个小播跟个小盆友似的。。。全屏状把小播引到边上~~退出全屏的时候，小播会在贴子外面慢吞吞跑贴子里来。 ...
这也被你发现了 这个小树播放器精力好充沛，像个淘气包……给黑黑老师点赞送花花来了{:4_187:}{:4_199:} 千羽 发表于 2024-3-7 19:22
这个小树播放器精力好充沛，像个淘气包……给黑黑老师点赞送花花来了
谢花花 这个就是射程自由吗 绿叶清舟 发表于 2024-3-7 19:46
这个就是射程自由吗
也许吧，我也不太清楚 马黑黑 发表于 2024-3-7 19:47
也许吧，我也不太清楚
不是你说的嘛