论坛 › 动画音画 › 阿兰 - 明日赞歌

马黑黑 发表于 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})`;
                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>

马黑黑 发表于 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})`;
                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>

起个网名好难 发表于 2024-6-12 19:18

赞！美女依次登台亮相{:5_117:}

红影 发表于 2024-6-12 19:18

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

红影 发表于 2024-6-12 19:20

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

起个网名好难 发表于 2024-6-12 19:20

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

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

马黑黑 发表于 2024-6-12 19:25

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

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

马黑黑 发表于 2024-6-12 19:26

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

{:4_191:}

马黑黑 发表于 2024-6-12 19:26

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

不如说带来了新的镁铝{:4_170:}

马黑黑 发表于 2024-6-12 19:27

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

{:4_190:}

醉美水芙蓉 发表于 2024-6-12 19:38

马黑黑 发表于 2024-6-12 20:07

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

显示正常吧

南无月 发表于 2024-6-12 20:38

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

南无月 发表于 2024-6-12 20:39

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

这个设想真是太妙了。。

马黑黑 发表于 2024-6-12 20:39

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

理论上应该是正常的

南无月 发表于 2024-6-12 20:40

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

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

南无月 发表于 2024-6-12 20:41

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

马黑黑 发表于 2024-6-12 20:41

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

这个简单的：共性加不同

马黑黑 发表于 2024-6-12 20:42

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

多看几遍就不觉得复杂了

南无月 发表于 2024-6-12 20:42

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

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

查看完整版本: 阿兰 - 明日赞歌