阿兰 - 明日赞歌

马黑黑

马黑黑

帖子代码

1. <style>
   
2. #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; }
   
3. #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; }
   
4. #innerBox:hover { height: 350px; }
   
5. </style>
   
6. 
   
7. <div id="outBox">
   
8.         <audio id="aud" src="https://music.163.com/song/media/outer/url?id=26402257" autoplay loop></audio>
   
9.         <div id="innerBox" title="播放"></div>
   
10. </div>
    
11. 
    
12. <script>
    
13. (function() {
    
14.         let ani, idx = 0;
    
15.         const pics = new Array(10).fill(0).map((item, key) => 'https://638183.freep.cn/638183/t24/3/alan' + (key + 1) + '.jpg');
    
16.         const showPic = () => {
    
17.                 innerBox.style.backgroundImage = `url(${pics[idx]})`;
    
18.                 var outwidth = outBox.offsetWidth, outheight = outBox.offsetHeight;
    
19.                 var inwidth = innerBox.offsetWidth, inheight = innerBox.offsetHeight;
    
20.                 var cx = (outwidth - inwidth - 150), cy = (outheight - inheight) / 2;
    
21. 
    
22.                 var fly = [
    
23.                         {right: `-${inwidth}px`, top: `${cy}px`},
    
24.                         {right: `${cx}px`, top: `${cy}px`, offset: 0.25},
    
25.                         {right: `${cx}px`, top: `${cy - 30}px`},
    
26.                         {right: `${cx}px`, top: `${cy + 30}px`},
    
27.                         {right: `${cx}px`, top: `${cy - 30}px`},
    
28.                         {right: `${cx}px`, top: `${cy}px`},
    
29.                         {right: `${cx}px`, top: `${cy}px`, offset: 0.95},
    
30.                         {right: `${outwidth}px`, top: `${cy}px`}
    
31.                 ];
    
32.                 ani = innerBox.animate(fly, 10000);
    
33.                 ani.onfinish = () => {
    
34.                         idx = (idx + 1) % (pics.length);
    
35.                         showPic();
    
36.                 };
    
37.         };
    
38.         const mState = () => {
    
39.                 aud.paused ? ani.pause() : ani.play();
    
40.                 innerBox.title = ['暂停','播放'][+aud.paused];
    
41.         };
    
42.         aud.onplaying = aud.onpause = () => mState();
    
43.         innerBox.onmouseover = () => {if(!aud.paused) ani.pause();};
    
44.         innerBox.onmouseout = () => {if(!aud.paused) ani.play();};
    
45.         innerBox.onclick = () => aud.paused ? aud.play() : aud.pause();
    
46.         showPic();
    
47. })();
    
48. </script>

复制代码

起个网名好难

赞！美女依次登台亮相

红影

这个有意思，遵守设定的规则，走到位时候，停下来做上下少量动作，然后继续走，来完成一个个美女的更替。
黑黑又带来新的效果

红影

鼠标触碰，则停止移动并变形，这样为点击也提供了方便呢

起个网名好难

马黑黑 发表于 2024-6-12 18:26
帖子代码

每次出现两个美女，头一个美女可能害羞一晃就下去了。

马黑黑

起个网名好难 发表于 2024-6-12 19:20
每次出现两个美女，头一个美女可能害羞一晃就下去了。

这个看浏览器吧，你的浏览器太快了

马黑黑

起个网名好难 发表于 2024-6-12 19:18
赞！美女依次登台亮相

马黑黑

红影 发表于 2024-6-12 19:18
这个有意思，遵守设定的规则，走到位时候，停下来做上下少量动作，然后继续走，来完成一个个美女的更替。
...

不如说带来了新的镁铝

马黑黑

红影 发表于 2024-6-12 19:20
鼠标触碰，则停止移动并变形，这样为点击也提供了方便呢

马黑黑

醉美水芙蓉 发表于 2024-6-12 19:38
老师这个效果漂亮！

显示正常吧

南无月

我这里显示完全正常。。出现速度正常，点头正常，退场正常。。十张美人图片全部正常。。。

南无月

完全没想到连续图片地址也可以用计算的方式显示。。
https://638183.freep.cn/638183/t24/3/alan' + (key + 1) + '.jpg
看了下地址应该是 [img ]https://638183.freep.cn/638183/t24/3/alan2.jpg[ /img]

这个设想真是太妙了。。

马黑黑

南无月 发表于 2024-6-12 20:38
我这里显示完全正常。。出现速度正常，点头正常，退场正常。。十张美人图片全部正常。。。

理论上应该是正常的

南无月

马黑黑 发表于 2024-6-12 20:39
理论上应该是正常的

退场的速度是一样的么。感觉比进场的快一丢丢

南无月

图片可以是播放器，点击触碰变椭圆，加光晕。。
控制音乐和出场暂停。。
这个感觉上有点复杂。。。。。

马黑黑

南无月 发表于 2024-6-12 20:39
完全没想到连续图片地址也可以用计算的方式显示。。
https://638183.freep.cn/638183/t24/3/alan ...

这个简单的：共性加不同

马黑黑

南无月 发表于 2024-6-12 20:41
图片可以是播放器，点击触碰变椭圆，加光晕。。
控制音乐和出场暂停。。
这个感觉上有点复杂。。。。。

多看几遍就不觉得复杂了

南无月

马黑黑 发表于 2024-6-12 20:41
这个简单的：共性加不同

本来我设想的是要有一堆图片链接。结果根本没有发现。。一句解决问题。。
JS真是妙啊。