帖子代码
<style>
#papa { margin: 0 0 0 calc(50% - 593px); width: 1024px; height: 576px; background: url('https://638183.freep.cn/638183/t24/1/girl.jpg') no-repeat center/cover; box-shadow: 3px 3px 8px #000; position: relative; --dis: none; --xx: 0; --yy: 0; }
#papa::before { position: absolute; content: ''; left: var(--xx); top: var(--yy); width: 50px; height: 50px; border: 1px solid green; pointer-events: none; display: var(--dis); }
#canv { position: absolute; inset: 0; cursor: crosshair; }
</style>
<div id="papa">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1907751641" autoplay loop></audio>
<canvas id="canv" width="1024px" height="640px"></canvas>
</div>
<script>
let ww = canv.width = papa.offsetWidth, hh = canv.height = papa.offsetHeight;
let clearTimer;
let ctx = canv.getContext('2d');
let img = document.createElement('img');
img.onload = () => {
if(img.complete) {
ctx.drawImage(img, 0, 0, ww, hh);
}
};
img.src = 'https://638183.freep.cn/638183/t24/1/u06.jpg';
canv.onmousemove = (e) => {
if(clearTimer) clearTimeout(clearTimer);
let x = e.offsetX, y = e.offsetY;
papa.style.setProperty('--xx', x - 25 + 'px');
papa.style.setProperty('--yy', y - 25 + 'px');
papa.style.setProperty('--dis', 'block');
ctx.clearRect(x - 25, y - 25, 50, 50);
};
canv.onmouseout = () => {
clearTimer = setTimeout(() => {
papa.style.setProperty('--dis', 'none');
ctx.drawImage(img, 0, 0, ww, hh);
}, 3000);
};
canv.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>
| 
发表于 2024-4-9 20:49
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡
楼主
发表于 2024-4-9 21:17
