队长的鹰会转向了

马黑黑 发表于 2022-7-15 13:14

马黑黑 发表于 2022-7-15 13:16

添加或改进过的代码用红色标志：

<style>
#papa { left: -352px; width: 1300px; height: 758px; background: blue url('https://pic.imgdb.cn/item/62d0df28f54cd3f937c14326.jpg') no-repeat center/cover; box-shadow: 4px 4px 24px #000; position: relative; }
#hunter { position: absolute; width: 122px; height: 147px; transition: left 3s, top 3s; z-index: 99; }
#prey { position: absolute; width: 240px; height: 240px; border-radius: 50%; }
#btnplay { position: absolute;left: 20px; top: 20px; width: 30px; height: 30px; cursor: pointer; border: none; outline: none; border-radius: 50%; }
#btnplay:hover { color: red; box-shadow: 1px 1px 1px #000; }
#lrcbox { position: absolute;left: 60px;top: 20px;font: normal 1.2em / 1.6em '宋体', sans-serif;color: snow;text-shadow: 1px 1px 2px #000; }
</style>

<div id="papa">
<input id="btnplay" type="button" value=">" />
<div id="lrcbox">LRC LOADING ...</div>
<img id="hunter" alt="" src="https://pic.imgdb.cn/item/6247e3c027f86abb2a56f17a.gif" />
<img id="prey" src="https://pic.imgdb.cn/item/62d0e127f54cd3f937c47bb3.jpg" alt="" />
</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1948069356.mp3" autoplay="autoplay" loop="loop"></audio>

<script>
let last = 0;
let lrcAr = [
['0.00','曲名 : 清凉音乐'],
['5.00','歌手 : 休闲 Maestro'],
['10.00','帖名 : 纯音乐'],
['160.00','谢谢欣赏 ']
];

let num = (min, max) => Math.floor(Math.random() * (max-min+1)) + min;
setTimeout(gogo,100);
btnplay.onclick = () => aud.paused ? aud.play() : aud.pause();
aud.addEventListener('playing', () => btnplay.value = '||');
aud.addEventListener('pause', () => btnplay.value = '>');

aud.addEventListener('timeupdate',function(){
let tt = aud.currentTime;
for(j=0; j<lrcAr.length; j++){
if(tt >= lrcAr) lrcbox.innerHTML = lrcAr;
}
});

function gogo() {
let left = num(50,1050), top = num(420,518);
hunter.style.transform = last < left ? 'scale(1,1)' : 'scale(-1,1)';
prey.style.left = left + 'px';
prey.style.top = top + 'px';
hunter.style.left = left + 45 + 'px';
hunter.style.top = top - 100 + 'px';
last = left;
setTimeout(gogo,6000);
}
</script>

马黑黑 发表于 2022-7-15 13:18

队长这个帖子非常不错，大气、沉稳，意境高雅。鹰会转向后就更加美妙了

@加林森

马黑黑 发表于 2022-7-15 13:21

背景图的分辨率再加 20% 就更理想了

加林森 发表于 2022-7-15 13:24

马黑黑发表于 2022-7-15 13:16
添加或改进过的代码用红色标志：

谢谢老黑了。你辛苦了。我收藏了。

加林森 发表于 2022-7-15 13:25

马黑黑发表于 2022-7-15 13:18
队长这个帖子非常不错，大气、沉稳，意境高雅。鹰会转向后就更加美妙了

@加林森

谢谢！{:4_190:}

马黑黑 发表于 2022-7-15 13:32

加林森发表于 2022-7-15 13:25
谢谢！

{:5_108:}

马黑黑 发表于 2022-7-15 13:33

加林森发表于 2022-7-15 13:24
谢谢老黑了。你辛苦了。我收藏了。

这组转向代码对你的鹰长期有效哈，但你要会剥离代码应用到新的场景

加林森 发表于 2022-7-15 13:33

马黑黑发表于 2022-7-15 13:32

{:5_108:}

转转发表于 2022-7-15 13:39

{:4_208:}队长的鹰被你训得会调皮捣蛋了{:4_189:}

马黑黑 发表于 2022-7-15 13:39

原理我简单说一下：

一、CSS部分，.hunter 选择器原来用 transition: all 3s，现在改为 left 3s, top 3s，速率仅作用于这两项属性，可以增删属性。这样不影响转向的动作。

二、JS部分：

加入一个变量 last，初始值为0，let last = 0，它的作用是记录上一次变化的左边值（left）；

然后在 gogo() 函数里，根据 last 和当下的 left 的值谁大谁小，判断并设置朝向——

hunter.style.transform = last < left ? 'scale(1,1)' : 'scale(-1,1)';

gogo()函数处理上面的判断与设置，还要记录本次的 left 值，以供下次变换动画时使用——

last = left;

记录 last 值必须放在判断与设置朝向之后。

马黑黑 发表于 2022-7-15 13:41

转转发表于 2022-7-15 13:39
队长的鹰被你训得会调皮捣蛋了

{:5_117:}还行还行

马黑黑 发表于 2022-7-15 13:41

转转发表于 2022-7-15 13:39
队长的鹰被你训得会调皮捣蛋了

跟你学的转转{:5_106:}

马黑黑 发表于 2022-7-15 13:42

加林森发表于 2022-7-15 13:33

这个帖子你可以加为精华，算是对你自己的奖励哈{:4_170:}

加林森 发表于 2022-7-15 13:46

马黑黑发表于 2022-7-15 13:33
这组转向代码对你的鹰长期有效哈，但你要会剥离代码应用到新的场景

是的。明白了。

加林森 发表于 2022-7-15 13:48

马黑黑发表于 2022-7-15 13:42
这个帖子你可以加为精华，算是对你自己的奖励哈

还可以这样玩啊。{:4_189:}

马黑黑 发表于 2022-7-15 18:10

加林森发表于 2022-7-15 13:48
还可以这样玩啊。

当然可以

马黑黑 发表于 2022-7-15 18:10

加林森发表于 2022-7-15 13:46
是的。明白了。

{:4_190:}

加林森 发表于 2022-7-15 18:28

马黑黑发表于 2022-7-15 18:10
当然可以

嗯嗯。

加林森 发表于 2022-7-15 18:29

马黑黑发表于 2022-7-15 18:10

老黑开始吃晚饭没有啊？

页: [1] 2

花潮论坛's Archiver

队长的鹰会转向了