太空流浪（学着用黑黑的两个效果）
<style>#papa { left: -302px; top:120px;width: 1200px; height: 675px; background: blue url('https://pic.imgdb.cn/item/62ef681e16f2c2beb11ab0e0.jpg')
no-repeat center/cover; box-shadow: 3px 3px 24px #000; position: relative; overflow: hidden;}
#ball { position: absolute; width: 480px; height: 350px; cursor: pointer; z-index: 100;}
#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: 100px; height: 100px; right: -100px; top: -675px; }
@keyframes shot { from {transform: translate(1024px, 0px); } to { transform: translate(-1200px,1280px); }}
</style>
<div id="papa">
<span id="tit">Far from Home电影《外星人》主题音乐</span>
<img id="ball" src="https://pic.imgdb.cn/item/62efaf7716f2c2beb160f90b.png" alt="" />
</div><br><br><br><br><br><br>
<script>
let moveX = 0, moveY = 0, stepX = 1, stepY = 1, canMove = true, aud = new Audio(), timer;
aud.src = 'https://music.163.com/song/media/outer/url?id=1394017237.mp3';
aud.loop = true;
aud.autoplay = true;
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));
let arr = ;
for(x of arr) {
let ele = document.createElement('img');
ele.className = 'mpic';
ele.src = 'https://pic.imgdb.cn/item/62ef637d16f2c2beb1077177.png';
ele.alt = '';
ele.style.animation = 'shot 4s linear ' + x * .6 + 's infinite';
papa.appendChild(ele);
}
</script> 外星人因为病毒的侵袭，被迫太空流浪{:4_173:} 沙发我的{:4_174:} 欣赏亲爱的精美的制作{:4_178:} 左右开弓，厉害{:4_170:} @马黑黑怎样让那个飘浮的球在病毒前面？{:4_204:}
原来宽度变一下，对角线也变了，感觉弄代码坑真多啊{:4_173:}
试着调整一下病毒出来的方向，原来数据不是简单地翻倍就可以了。本来用的1024的宽，觉得效果不太好，调成了1200，发现病毒又一次无法在对角线上了，调了一下，还差点，就这样吧，不调了{:4_173:} 小辣椒 发表于 2022-8-7 20:35
沙发我的
亲爱的真快，我正想着怎样让病毒完全在对角线上呢，刚想再调一下，发现亲爱的已经回复了{:4_173:} 本帖最后由 马黑黑 于 2022-8-7 20:51 编辑
红影 发表于 2022-8-7 20:36
@马黑黑怎样让那个飘浮的球在病毒前面？
你把漂浮器限制在左下区域就行。具体做法是：
步骤一：更改 moveY = 0 为 moveY = 300（300是个大约数，一般是父框高度的一半）；
步骤二：更改 motion 函数:
if(moveX < 0 || moveX > (papa.offsetWidth - ball.offsetWidth) / 2) stepX = -stepX;
if(moveY < 300 || moveY > papa.offsetHeight - ball.offsetHeight) stepY = -stepY; 小辣椒 发表于 2022-8-7 20:36
欣赏亲爱的精美的制作
想把两个效果放在一起，前面不知道什么地方弄错了，一直弄不出来。 创意不错，但是没分给了{:4_173:} 小辣椒 发表于 2022-8-7 20:36
左右开弓，厉害
换了个方向，感觉往斜下跑比较好，结果简单的换方向却折腾半天，代码太不熟了{:4_173:} 红影 发表于 2022-8-7 20:36
@马黑黑怎样让那个飘浮的球在病毒前面？
原来宽度变一下，对角线也变了，感觉弄代码坑真多啊{: ...
看 9 # 马黑黑 发表于 2022-8-7 20:47
你把漂浮器限制在左下区域就行。具体做法是：
步骤一：更改 moveY = 0 为 moveY = 300（300是个大约数 ...
可是，我想让它满世界跑啊，还想让它在病毒前面{:4_173:}
好吧，听你的，我去调一下试试{:4_187:} 马黑黑 发表于 2022-8-7 20:52
看 9 #
不行呢，在本地试了一下，改后好怪异，漂浮球在下部走波浪线了。算了，还是这样吧，不改了{:4_204:} 红影 发表于 2022-8-7 21:02
不行呢，在本地试了一下，改后好怪异，漂浮球在下部走波浪线了。算了，还是这样吧，不改了
也许我回帖时手写的代码不准确，现在把测试过的放在这里：
if(moveX < 0 || moveX > (papa.offsetWidth - ball.offsetWidth) / 2) stepX = -stepX;
if(moveY < 300 || moveY > papa.offsetHeight - ball.offsetHeight) stepY = -stepY;
前面提到的 moveY = 0 要改为 moveY = 300 红影 发表于 2022-8-7 20:55
可是，我想让它满世界跑啊，还想让它在病毒前面
好吧，听你的，我去调一下试试
满世界跑又要在病毒图片的前面那不行，即使行也是很大的编程，毕竟一个是无向性的，一个是单向的 挺好玩的。 加林森 发表于 2022-8-7 21:35
挺好玩的。
这个创意好，值得学习 马黑黑 发表于 2022-8-7 21:42
这个创意好，值得学习
嗯嗯。