Javascript 如何将一幅图像循环移动到另一幅图像的上方
我们需要创建一个屏幕保护程序，其中一个图像是固定的，第二个图像应该连续向右移动，这样当它向右移动时，图像不存在的左侧部分应该再次填充图像。我们的编码如下所示Javascript 如何将一幅图像循环移动到另一幅图像的上方,javascript,css,html,Javascript,Css,Html,我们需要创建一个屏幕保护程序，其中一个图像是固定的，第二个图像应该连续向右移动，这样当它向右移动时，图像不存在的左侧部分应该再次填充图像。我们的编码如下所示 <!DOCTYPE html> <html> <head> <title>Moving Screen Saver</title> <style> html, body { p
<!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>
移动屏幕保护程序
html，正文{
位置：相对位置；
身高：100%；
宽度：100%
}
#bgimg{
背景图片：url（“background/moon_bg.png”）；
位置：绝对位置；
背景重复：无重复；
背景尺寸：封面；
宽度：100%；
身高：100%；
}
#bdgimg{
背景图片：url（“buildings/bdg6.png”）；
位置：绝对位置；
背景色：透明；
底部：0px；
左：0px；
宽度：100%；
/*高度：836px*/
身高：100%；
}
var bdg_img=document.getElementById（'bdgimg'）；
变量动画；
函数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）；//在20秒内调用moveRight
}
moveRight（）；
这是将第二个图像按预期向右移动，但不确定如何填充左侧部分。我们需要创造一种效果，比如图像不断向右移动，但图像也应该出现在左侧。这意味着由于图像移动，左侧不应出现空白区域。任何人都可以帮我解决这个问题。我想说你并不需要JavaScript和克隆。只要获得连续重复循环的正确值（
48.1vw，96.2vw背景位置的动画。例如：
.animator{
背景色：#eee；
背景图片：url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/car.svg);
调整大小：两者；
溢出：隐藏；
动画：移动背景3s线性无限；
垫底：25%；
宽度：100%；
背景尺寸：包含；
}
身体{
填充：0；
保证金：0；
字体系列：无衬线；
}
@关键帧移动背景{
0% {
背景位置：0vw，0%；
}
100% {
背景位置：48.1vw，0%；
}
}
对于#bdgimg（movig之一），您需要css:z-index:10或smth，因此它是最重要的。否则，我不确定是什么问题，因为窗口上总是有#bgimg。@纳贾斯特：如果你看到我附加的图像，左边没有顶部图像，因为它被移动了。但是我需要在那里显示因为向右移动而被剪切的图像。哦，我想我明白了。。你想让同一个图像一次又一次地滚动（？）我不是专家，但你可以在窗口外使用另一个相同的图像，然后移动两个图像。一旦图像的整个长度消失（第一幅图像在右侧屏幕外），您可以将其重新定位到左侧（通过指定类），同时您可以将向左移动的数量减少图像宽度，以便图像在特定时间内离开屏幕。。谢谢@Andrie Gheorghiu。但当我在3秒钟后使用此方法时，会出现屏幕闪烁的错觉。@kadina这就是我所说的“只要你连续重复循环得到正确的值”，你必须将100%
规则更改为适合你图像的值。您需要的不是48.1vw
而是图像外观中的65vw
~75vw
。改变它直到你做对为止。或者使用JavaScript
：）谢谢@Andrie Gheorghiu。无法确定确切的数字。如果可能的话，我可以知道如何使用javascript吗？