CSS图像超过JS动画图像

我创建了以下简单的网站。我有星空和星系图片。 Starfield由JS代码制作动画。星星在移动。但是,当我将Galaxy放在带有CSS代码的星空上时,星星停止移动。 下面我放置了JS代码和HTML代码,而没有在星空上放置星系。我如何在恒星移动的情况下将另一个放置?

问候 皮特

<head>
    <meta charset ="utf-8">
    <title> Galaktyka</title>

    <script src ="Code17.js"></script>

    <style>

    #galaxy{
        display: block;
        margin-left: 0;
        margin-top: 0;
    }

    #star{
        position: relative;
         }

    </style>


</head>

<body>

        <script>
            window.onscroll = function () {
            window.scrollTo(0,0);
        }
        </script>
        <style type="text/css">
        body{
            overflow: hidden;
            }
        </style>

    <img id="galaxy" src="Galaktyka.jpg" style="width: 70%">
    <img id="star" src="starfield.jpg">


</body>

和下面的JS

window.onload = function(){
let image =  document.getElementById("star");
imageLeft = -175;
setInterval(move, 100, image);
}

var motion = true;
function move(){
if(motion){

let image =  document.getElementById("star");


imageLeft = imageLeft + 1;

image.style.left = imageLeft + "px";

if(imageLeft == 0){
motion = false;}

}else{

let image =  document.getElementById("star");

imageLeft = imageLeft - 1;

image.style.left = imageLeft + "px";


if (imageLeft == -175){
motion = true;


}

}

}

评论