Question

你可能已经看到，在某些游戏中，移动背景是对角线的。看看这个Megaman x Storm Eagle Stage https://youtu.be/Wfm3ZvcxOKQ?t=1m33s的例子，云从上到下，从右到左（对角线）移动。我需要使用CSS3或任何类型的javascript，使用tile纹理来实现相同的效果。

我在哪里可以找到教授如何制作该教程的教程？我找到了一些，但它们用于创建动态对象。

Answer 1

嗨，这可以使用基本的javascript或任何JavaScript库来解决。我将举一个小的工作示例，或者你可以跳到这个js小提琴https://jsfiddle.net/lesshardtofind/a2Lx51xy/

在您的HTML中，您只需要一个元素。

<div class='background'></div>

该课程供我们选择。首先用一些css让我们拍照，这样我们就可以看到它了。

.background{
  background-image: url('yourImageUrl.com/image.png');
  height: 500px;
  width: 500px;
}

所以背景图像应用你的纹理，高度和宽度将应用值，这样你就可以看到div，否则它将为0，里面没有实际的标记。

现在为有趣的部分。 JavaScript可以抓取这个div元素并应用样式。通常我会在jQuery中执行此操作，但由于您只是指定了javaScript，因此我将保留外部库。

var x = 0; 
var y = 0;
var xSpeed = 5;
var ySpeed = 5;
var interval = setInterval(function(){
  var xVal = x + 'px';
  var yVal = y + 'px';
  var bg = document.getElementsByClassName('background')[0].style.backgroundPosition = xVal + " " + yVal;
  x-=xSpeed;
  y+=ySpeed;
}, 100);

为了解释这一点，我将x和y作为我的背景坐标设置为0作为开始。最好设置默认值，否则您将邀请未定义的行为。 xSpeed和ySpeed只是变量，您可以更改加速或减慢动画的值。 interval是存储setInterval函数设置的区间的变量。 setInterval接受函数和时间值作为参数。该函数将在每个时间间隔调用，时间是等待再次调用该函数的时间。

document.getElementsByClassname('background')返回一个我使用[0]索引访问的数组。然后style允许您将值应用于backgroundPosition。请注意，我应用了＆＃39; px＆＃39;到每个数字的末尾，以便它们是一个字符串，如＆＃34; 3px 5px＆＃34;这就是预期的方式。

然后使用-=和+=应用速度。由于dom从浏览器左下角的0,0开始，然后添加到Y将向下移动，从X减去将向左移动。

最后这是有效的，因为背景默认设置为重复，因此图像将继续向下和向左漂移。如果您提供平铺图像，则无法在一次重复和下一次重复之间看到接缝。

修改：添加全屏

您可以通过确保其父级也具有设置的宽度和高度来将全屏添加到子对象。所以改变你的CSS。

body, html{
  height: 100%;
  width: 100%;
}
.background{
  background-image: url('http://bgfons.com/upload/sky_texture1998.jpg');
  height: 100%;
  width: 100%;
  border: 1px solid red;
}

在%高度上，您需要父节点从中继承高度。

CSS3 / HTML5 / JS - 如何使用幻灯片效果创建动画纹理背景？

1 个答案: