梦油 发表于 2022-8-6 17:55
大家有目共睹啊
看到的是一同学习与研究
马黑黑 发表于 2022-8-5 23:25
感觉不是太差
黑黑审美很棒{:4_187:}
红影 发表于 2022-8-6 20:21
黑黑审美很棒
一般般班里倒数第三
马黑黑 发表于 2022-8-6 17:56
看到的是一同学习与研究
是的马黑黑朋友，相互促进、共同提高。
梦油 发表于 2022-8-7 09:36
是的马黑黑朋友，相互促进、共同提高。
如此甚好，皆大欢喜
马黑黑 发表于 2022-8-7 10:22
如此甚好，皆大欢喜
你以一己之力帮助很多人一起丰富了花潮论坛功不可没。
梦油 发表于 2022-8-7 10:31
你以一己之力帮助很多人一起丰富了花潮论坛功不可没。
功谈不上，大家一块玩玩
马黑黑 发表于 2022-8-7 10:48
功谈不上，大家一块玩玩
有功无功大家心里有数。
梦油 发表于 2022-8-7 13:07
有功无功大家心里有数。
{:5_109:}
马黑黑 发表于 2022-8-6 21:11
一般般班里倒数第三
想把这个效果跟《天际》那个火箭斜飞的放到一起，弄不出来，是JS冲突了吧？要怎样弄呢？
红影 发表于 2022-8-7 19:53
想把这个效果跟《天际》那个火箭斜飞的放到一起，弄不出来，是JS冲突了吧？要怎样弄呢？
各自驱动自己的，变量名不能互相污染就行
马黑黑 发表于 2022-8-7 19:54
各自驱动自己的，变量名不能互相污染就行
变量名本来就不一样啊，不知道为什么分开都可以动，放一起就不会动了{:4_203:}
本帖最后由 马黑黑 于 2022-8-7 20:19 编辑
红影 发表于 2022-8-7 20:00
变量名本来就不一样啊，不知道为什么分开都可以动，放一起就不会动了
那是代码不完整。参考这个二合一的（吉尔拉+天际）：
<style>
#papa { margin: auto; 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; overflow: hidden; 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); }
.mpic { position: absolute; width: 124px; height: 221px; right: -124px; bottom: -130px; }
@keyframes shot { from {transform: translate(0px, 0px) rotate(-45deg); } to { transform: translate(-1084px, -600px) rotate(-45deg); }}
</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, arr = ;
aud.src = 'https://music.163.com/song/media/outer/url?id=211011.mp3';
aud.loop = true;
aud.autoplay = true;
for(x of arr) {
let ele = document.createElement('img');
ele.className = 'mpic';
ele.src = 'https://638183.freep.cn/638183/Pic/81/tj.gif';
ele.alt = '';
ele.style.animation = 'shot 4s linear ' + x * .6 + 's infinite';
papa.appendChild(ele);
}
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>
红影 发表于 2022-8-7 19:53
想把这个效果跟《天际》那个火箭斜飞的放到一起，弄不出来，是JS冲突了吧？要怎样弄呢？
仔细观察一下73楼的整合代码。我估计你做不成功，原因在于CSS：没把 @keyframes 弄过去。选择器 .mpic 是通过 @keyframes 驱动的，而球球的动力来自JS的 motion 函数。
马黑黑 发表于 2022-8-7 20:18
那是代码不完整。参考这个二合一的（吉尔拉+天际）：
刚看到黑黑的帖子，我本来分别做了两个帖子，前面用A+B没成功，然后又试了一下B+A，结果可以了。
不知道之前的操作哪里弄错了什么。AB两个帖子都没动过。
红影 发表于 2022-8-7 21:21
刚看到黑黑的帖子，我本来分别做了两个帖子，前面用A+B没成功，然后又试了一下B+A，结果可以了。
不知道 ...
应该是有些东东确实。CSS、html、JS要同步跟进。
马黑黑 发表于 2022-8-7 20:23
仔细观察一下73楼的整合代码。我估计你做不成功，原因在于CSS：没把 @keyframes 弄过去。选择器 .mpic 是 ...
这个我留着的啊，估计多了aud =。。。
去掉前一个音乐的时候，没注意这个。就是火箭里的let arr =....后面还有一句的，再看一遍才看出来。
其他的，AB两个帖子都没调。
马黑黑 发表于 2022-8-7 21:22
应该是有些东东确实。CSS、html、JS要同步跟进。
又要变方向，又要贴图，我就弄了两个帖子，分别都调好了以后，才合并的。否则都混一起，脑筋不够用了。这样也容易发现是哪步出问题了。
红影 发表于 2022-8-7 22:51
又要变方向，又要贴图，我就弄了两个帖子，分别都调好了以后，才合并的。否则都混一起，脑筋不够用了。这 ...
其实你这法子已经不错的，a+b不行就b+a，反正就是以一个为核心，另一个不同的加上来。
马黑黑 发表于 2022-8-7 23:01
其实你这法子已经不错的，a+b不行就b+a，反正就是以一个为核心，另一个不同的加上来。
是啊，反正内容都一样，照理哪个为核心都行的，结果却是不行，只能B为核心了{:4_173:}