本帖最后由 花简静 于 2024-8-18 15:18 编辑
<style>
#papa {
margin: 130px 0 30px calc(50% - 931px);
width: 1700px;
height: 900px;
background: cyan url('https://pic.imgdb.cn/item/65f31a7f9f345e8d037abd04.jpg') no-repeat center/cover;
box-shadow: 3px 3px 20px #000;
z-index: 1;
position: relative;
}
#btnplay {
position: absolute;
left: 0px;
top: 0px;
width: 160px;
height: 160px;
border: 2px dotted LightCoral;
border-radius: 50%;
box-shadow: inset 0 0 20px #FF4500;
transition: 6s;
animation: rot 8s linear infinite var(--state);
}
#papa:fullscreen #btnplay { width: 280px; height: 280px; }
#papa video {
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
object-fit: cover;
opacity: .6;
mix-blend-mode: darken;
pointer-events: none;
}
#papa > video {
border-radius: 0 50% 0 0;
mix-blend-mode: screen;
filter: opacity(.65);
}
@keyframes rot { to { transform: rotate(360deg); } }
</style>
<div id="papa">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=291343" autoplay loop></audio>
<video src="https://img.tukuppt.com/video_show/15653652/01/12/35/6193af432daf8.mp4" loop muted></video>
<div id="btnplay">
<video id="vid" src="https://img.tukuppt.com/video_show/15653652/01/39/00/63258fe5ccf6a.mp4" loop muted></video>
</div>
</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', css: '--bg: transparent; --color: cyan; bottom: 10px; left: 48%;' });
let playVideo = (flag) => { let vids = document.querySelectorAll('#papa video'); vids.forEach(vid => { flag ? vid.play() : vid.pause(); }); };
let mState = () => aud.paused ?
(papa.style.setProperty('--state', 'paused'), btnplay.title = '点击播放', vid.pause(), playVideo(false)) :
(papa.style.setProperty('--state', 'running'), btnplay.title = '点击暂停', vid.play(), playVideo(true));
let correctPos = (pa,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 > pa.clientWidth) left = pa.clientWidth - son.clientWidth;
if(top + son.clientHeight > pa.clientHeight) top = pa.clientHeight - son.clientHeight;
son.style.left = left + 'px';
son.style.top = top + 'px';
};
aud.onplaying = aud.onpause = () => mState();
btnplay.onclick = () => aud.paused ? aud.play() : aud.pause();
let movTimer = null, sonSize = btnplay.clientWidth;
let rect = papa.getBoundingClientRect();
let margin = {left: parseInt(window.getComputedStyle(papa).marginLeft)};
document.onmousemove = function(e) {
clearTimeout(movTimer);
let x, y;
movTimer = setTimeout(function() {
if(e.target.id === 'papa') {
x = e.offsetX || e.layer.x;
y = e.offsetY || e.layer.y;
}else{
let rect = papa.getBoundingClientRect();
x = e.pageX - rect.x;
y = e.pageY - rect.y;
}
btnplay.style.cssText += `left: ${x}px; top: ${y}px;`;
correctPos(papa, btnplay);
}, 400);
};
})();
document.onclick = (e) => console.log(e.offsetX);
</script>
<br><br><br><br><br><br>
| 
