这让我现在有点困惑。
我是一个相当有经验的程序员,希望在我们婚礼的倒计时页面上给我的未婚妻一个惊喜。所需的效果基本上模拟了落在主页后面的五彩纸屑。我的设置如下:
我在 javascript 中有一个 div 数组。每个 div 都绝对定位在页面上。我有一个间隔集,每 50 毫秒左右更新一次。在每个刻度上,我在我的 div 数组上运行一个 for 循环,并进行计算并更新它们的位置。
问题 然而,我遇到的问题是,即使我可以清楚地看到所有 div 都在初始化阶段被创建、存储到数组中并被修改(在这种情况下,每个 div 都有轻微的随机旋转),一旦勾选要更新它们的位置,只有存储在数组最后一个插槽中的 div 才会更新其位置。出于测试目的,我什至尝试按索引对每个 div 进行硬编码,但严格来说,它是实际更新其位置的最后一个元素。即使在计算之前和之后为每个 div 打印当前的“left”和“top”样式值,也显示该值已更改,但没有明显的变化。这是我的基本代码:
Javascript
var container; // the div that will have all the other divs attached to it
var conf = new Array(); // the array of divs to modify
var rots = new Array(); // the rotation of each div
var vels = new Array(); // the velocity of each div
var xPos = new Array(); // the current x value of position in pixels
var yPos = new Array(); // the current y value of position in pixels
var xVels = new Array(); // the x portion of that velocity
var yVels = new Array(); // the y portion of that velocity
function initialize() // this is attached to the onload event on my <body> tag
{
container = document.getElementById("conf_container");
confettiInit(); // creates, initializes, and displays each div
setInterval(updateConfetti, 42);
}
function confettiInit()
{
screenHeight = window.innerHeight;
screenWidth = window.innerWidth;
for (var i = 0; i < 25; i ++) // create 25 confetti flakes
{
// append a div in the container with a unique ID
container.innerHTML += "<div class='conf' id='conf_" + i + "'></div>";
// store the element in an array
conf[i] = document.getElementById("conf_" + i);
// ensure confetti is in the background, and each z index is unique
conf[i].style.zIndex = -i - 1;
xPos[i] = window.innerWidth * Math.random(); // calculate random x position
conf[i].style.left = xPos[i] + "px"; // set x position of div
yPos[i] = -40; // y position above screen
conf[i].style.top = yPos[i] + "px"; // set y position of div
// calculate the random amount of rotation (-30 to 30 degrees)
rots[i] = Math.random() * 60*(Math.PI/180) - 30*(Math.PI/180);
// set rotation of div
conf[i].style.webkitTransform = "rotate(" + -rots[i] + "rad)";
vels[i] = Math.random() * 3 + 2; // calculate random velocity (2-5)
xVels[i] = vels[i] * Math.sin(rots[i]); // get x portion of velocity
yVels[i] = vels[i] * Math.cos(rots[i]); // get y portion of velocity
}
}
function updateConfetti()
{
for (var i = 0; i < 25; i ++)
{
xPos[i] += xVels[i]; // calculate new x position
yPos[i] += yVels[i]; // calculate new y position
conf[i].style.left = xPos[i] + "px"; // set div's x position
conf[i].style.top = yPos[i] + "px"; // set div's y position
// if the confetti piece leaves the viewing area...
if (xPos[i] < -50 ||
xPos[i] > window.screenWidth + 10 ||
yPos[i] > window.screenHeight + 10)
{
// send it back to the top and reinitialize it
xPos[i] = window.innerWidth * Math.random();
conf[i].style.left = xPos[i] + "px";
yPos[i] = -40;
conf[i].style.top = yPos[i] + "px";
rots[i] = Math.random() * 60*(Math.PI/180) - 30*(Math.PI/180);
conf[i].style.webkitTransform = "rotate(" + -rots[i] + "rad)";
vels[i] = Math.random() * 3 + 2;
xVels[i] = vels[i] * Math.sin(rots[i]);
yVels[i] = vels[i] * Math.cos(rots[i]);
}
}
}
CSS
div.conf
{
height: 29px;
width: 50px;
background-image: url("images/ConfettiYellow.gif");
position: absolute;
}
#conf_container
{
left: 0px;
top: 0px;
width: 100%;
height: 100%;
position: absolute;
overflow: hidden;
}