|
|

楼主 |
发表于 2022-8-5 07:30
|
显示全部楼层
代码分享:
- <style>
- #papa { left: -214px; width: 1024px; height: 576px; background: lightgreen url('https://638183.freep.cn/638183/Pic/81/lake1.jpg') no-repeat center/cover; box-shadow: 3px 3px 24px #000; position: relative; }
- #ball { position: absolute; width: 100px; height: 100px; background: rgba(0,255,255,.75) radial-gradient(at 35% 35%, lightgray, transparent); border-radius: 50%; cursor: pointer; }
- #tit { position: absolute; padding: 0; margin: 0; left: 20px; top: 20px; font: bold 2em sans-serif; color: #6795ac; text-shadow: 1px 1px 2px rgba(0,0,0,.75); }
- </style>
- <div id="papa">
- <span id="tit">陈悦 - 吉尔拉</span>
- <span id="ball"></span>
- </div>
- <script>
- let moveX = 0, moveY = 0, stepX = 1, stepY = 1, canMove = true, aud = new Audio(), timer;
- aud.src = 'https://music.163.com/song/media/outer/url?id=211011.mp3';
- aud.loop = true;
- aud.autoplay = true;
- timer = requestAnimationFrame(motion);
- function motion() {
- moveX += stepX;
- moveY += stepY;
- ball.style.left = moveX + 'px';
- ball.style.top = moveY + 'px';
- timer = requestAnimationFrame(motion);
- if(moveX < 0 || moveX > papa.offsetWidth - ball.offsetWidth) stepX = -stepX;
- if(moveY < 0 || moveY > papa.offsetHeight - ball.offsetHeight) stepY = -stepY;
- }
- ball.onclick = () => aud.paused ? (aud.play(), requestAnimationFrame(motion)) : (aud.pause(), cancelAnimationFrame(timer));
- </script>
复制代码
|
|