谢顶其实挺好，绝顶聪明
问题很多人都不愿意没头发{:4_173:} 红影 发表于 2024-2-7 12:44
问题很多人都不愿意没头发
那太蠢了 马黑黑 发表于 2024-2-7 13:01
那太蠢了
我就是不愿意的人之一{:4_173:} 红影 发表于 2024-2-7 13:40
我就是不愿意的人之一
怪不得学代码这么折腾 马黑黑 发表于 2024-2-7 17:46
怪不得学代码这么折腾
你的意思学代码不折腾的，都是没头发的人？
哈哈，那我情愿继续折腾，使劲折腾{:4_173:} 本帖最后由 马黑黑 于 2024-3-16 10:17 编辑 <br /><br /><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 var(--state);
}
#papa:fullscreen #btnplay { width: 120px; height: 120px; }
#papa video {
position: absolute;
width: 100%;
height: 100%;
border-radius: 0 50%;
object-fit: cover;
mix-blend-mode: lighten;
opacity: .2;
pointer-events: none;
}
@keyframes rot { to { transform: rotate(360deg); } }
</style>
<div id="papa">
<audio src="https://music.163.com/song/media/outer/url?id=1379294032" autoplay loop></audio>
<video src="https://img3.tukuppt.com/video_show/15653652/01/06/15/615cf6769bff8.mp4" loop muted></video>
<img id="btnplay" src="https://638183.freep.cn/638183/small/purple.png" alt="" title="点击播放" />
<div id="msg22" style="margin: 100px; padding: 20px; color: white;"></div>
</div>
<script>
/* fsgo.js by Mahei on 2024-3-17
全屏 + 小播跟随 + 音、视频控制
*/;
var fsBox = document.createElement('div');
fsBox.id = 'btnFs';
fsBox.innerText = '进入全屏';
fsBox.style.cssText += `
position: absolute;
color: var(--color);
background: var(--fsBg);
border: 2px solid var(--color);
border-radius: 6px;
padding: 4px;
transition: opacity 1s;
cursor: pointer;
opacity: 0;
z-index: 1000;
`;
(function(mkFS) {
let setFullScreen = (user_set) => {
let _config = {
papa: '#papa',
css: 'left: 50%; bottom: 10px; transform: translate(-50%); --color: white; --fsBg: #333;',
go: {x: true, y: true}
};
let data = {..._config, ...user_set};
let papa = document.querySelector(data.papa);
if(papa == null) return;
papa.appendChild(fsBox);
fsBox.style.cssText += data.css;
let aud = papa.querySelector('audio'), vids = papa.querySelectorAll('video');
let timerId = null, movTimer = null, fs = false;
papa.addEventListener('mousemove', () => {
clearTimeout(timerId);
fsBox.style.opacity = '1';
timerId = setTimeout('fsBox.style.opacity = "0"', 3000);
});
document.addEventListener('fullscreenchange', () => {
if (document.fullscreenElement !== null) {
fs = true;
fsBox.innerText = '退出全屏';
} else {
fs = false;
fsBox.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';
};
let playVideo = (flag) => vids.forEach(vid => flag ? vid.play() : vid.pause());
let mState = () => aud.paused ? (papa.style.setProperty('--state','paused'),btnplay.title = '点击播放',playVideo(false)) : (papa.style.setProperty('--state','running'),btnplay.title = '点击暂停',playVideo(true));
let calcOffset = (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};
}
document.onmousemove = function(e) {
if(e.target.id === 'btnplay') return;
clearTimeout(movTimer);
let x, y;
movTimer = setTimeout(function() {
x = e.pageX - calcOffset(papa).x;
y = e.pageY - calcOffset(papa).y;
msg22.innerHTML = `x: ${x} <br> y: ${y} <br> pa offset-y: ${calcOffset(papa).y} / son offset-y: ${calcOffset(btnplay).y}`;
if(document.fullscreenElement) {
y = e.clientY;
}
let left = data.go.x === true ? x + 'px': '', top = data.go.y === true ? y + 'px' : '';
btnplay.style.cssText += `left: ${left}; top: ${top};`;
correctPos(btnplay);
}, 400);
};
aud.onpause = aud.onplaying = () => mState();
fsBox.onclick = () => fs ? document.exitFullscreen() : papa.requestFullscreen();
btnplay.onclick = () => aud.paused ? aud.play() : aud.pause();
};
mkFS.FS = setFullScreen;
})(this);
FS({
papa: '#papa',
css: '--bg: transparent; --color: #ccc; bottom: 10px; left: 48%;',
go: {x: true, y: true}
});
</script> 马黑黑 发表于 2024-2-7 21:49
我可不希望我的头发没有了{:4_173:}
页:
1
[2]