|
|

楼主 |
发表于 2024-6-12 18:26
|
显示全部楼层
帖子代码
- <style>
- #outBox { margin: 30px 0 0 calc(50% - 721px); width: 1280px; height: 850px; background: url('https://638183.freep.cn/638183/t24/3/alan.jpg') no-repeat center/cover; border: 1px solid gray; overflow: hidden; z-index: 1; position: relative; }
- #innerBox { position: absolute; right: 30px; top: calc(50% - 150px); width: 300px; height: 300px; background: inherit; border-radius: 50%; box-shadow: inset 0 0 100px rgba(0,0,128,.5), 0 0 36px rgba(0,0,128,.5); cursor: pointer; transition: 1s; }
- #innerBox:hover { height: 350px; }
- </style>
- <div id="outBox">
- <audio id="aud" src="https://music.163.com/song/media/outer/url?id=26402257" autoplay loop></audio>
- <div id="innerBox" title="播放"></div>
- </div>
- <script>
- (function() {
- let ani, idx = 0;
- const pics = new Array(10).fill(0).map((item, key) => 'https://638183.freep.cn/638183/t24/3/alan' + (key + 1) + '.jpg');
- const showPic = () => {
- innerBox.style.backgroundImage = `url(${pics[idx]})`;
- var outwidth = outBox.offsetWidth, outheight = outBox.offsetHeight;
- var inwidth = innerBox.offsetWidth, inheight = innerBox.offsetHeight;
- var cx = (outwidth - inwidth - 150), cy = (outheight - inheight) / 2;
- var fly = [
- {right: `-${inwidth}px`, top: `${cy}px`},
- {right: `${cx}px`, top: `${cy}px`, offset: 0.25},
- {right: `${cx}px`, top: `${cy - 30}px`},
- {right: `${cx}px`, top: `${cy + 30}px`},
- {right: `${cx}px`, top: `${cy - 30}px`},
- {right: `${cx}px`, top: `${cy}px`},
- {right: `${cx}px`, top: `${cy}px`, offset: 0.95},
- {right: `${outwidth}px`, top: `${cy}px`}
- ];
- ani = innerBox.animate(fly, 10000);
- ani.onfinish = () => {
- idx = (idx + 1) % (pics.length);
- showPic();
- };
- };
- const mState = () => {
- aud.paused ? ani.pause() : ani.play();
- innerBox.title = ['暂停','播放'][+aud.paused];
- };
- aud.onplaying = aud.onpause = () => mState();
- innerBox.onmouseover = () => {if(!aud.paused) ani.pause();};
- innerBox.onmouseout = () => {if(!aud.paused) ani.play();};
- innerBox.onclick = () => aud.paused ? aud.play() : aud.pause();
- showPic();
- })();
- </script>
复制代码
|
评分
-
| 参与人数 3 | 威望 +130 |
金钱 +260 |
经验 +130 |
收起
理由
|
小辣椒
| + 50 |
+ 100 |
+ 50 |
赞一个! |
南无月
| + 30 |
+ 60 |
+ 30 |
很给力! |
红影
| + 50 |
+ 100 |
+ 50 |
赞一个! |
查看全部评分
|