如何循环移动其他图像上的一个图像

问题描述 投票：0回答：1

enter image description here我们需要创建一个屏幕保护程序，其中一个图像被固定，第二个图像应该连续向右移动，当它向右移动时，图像不存在的左侧部分应该再次填充图像。我们的编码如下所示。

<!DOCTYPE html>
<html>
    <head>
        <title>Moving Screen Saver</title>
        <style>
            html, body {
                position: relative;
                height: 100%;
                width: 100%
            }
            #bgimg {
                background-image: url("background/moon_bg.png");
                position: absolute;
                background-repeat: no-repeat;
                background-size: cover;
                width: 100%;
                height: 100%;
            }
            #bdgimg {
                background-image: url("buildings/bdg6.png");
                position: absolute;
                background-color:transparent;
                bottom: 0px;
                left : 0px;
                width: 100%;
                /*height: 836px;*/
                height: 100%;
            }
        </style>
    </head>
    <body>
        <div id="bgimg">
        </div>
        <div id="bdgimg">
        </div>
        <script type="text/javascript">
            var bdg_img = document.getElementById('bdgimg');
            var animate;
            function moveRight()
            {
                bdg_img.style.left = bdg_img.style.left || 0;
                bdg_img.style.left = parseInt(bdg_img.style.left) + 10 + 'px';
                animate = setTimeout(moveRight,40); // call moveRight in 20msec
            }
            moveRight();
        </script>
    </body>
</html>

这会将第二张图像按预期向右移动，但不确定如何填充左侧部分。我们需要创建一个效果，如图像连续向右移动，但图像也应该出现在左侧。这意味着由于图像移动，左侧不应出现空白区域。任何人都可以帮我解决这个问题。

javascript css html5
1个回答
1
投票

我说你真的不需要JavaScript和克隆它。你可以使用简单的@keyframe动画，动画background-position动画，只要你得到连续重复循环的正确值（下面的例子中的48.1vw, - 当然，它可以是任何倍数即：96.2vw），以匹配比例你使用的图像。例如：

.animator {
  background-color: #eee;
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/car.svg);
  resize: both;
  overflow: hidden;
  animation: move-background 3s linear infinite;
  padding-bottom: 25%;
  width: 100%;
  background-size: contain;
}
body {
  padding: 0;
  margin: 0;
  font-family: sans-serif;
}
@keyframes move-background {
  0% {
    background-position: 0vw, 0%;
  }
  100% {
    background-position: 48.1vw, 0%;
  }
}
<div class="animator"></div>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.