Question

我正在尝试更改以下代码：

var items = document.querySelectorAll('.mover');
for (var i = 0; i < 60; i++) {
  var phase = Math.sin((document.body.scrollTop / 1250) + (i % 5));
  items[i].style.left = items[i].basicLeft + 100 * phase + 'px';
}

进入这个...

var items = document.querySelectorAll('.mover');
for (var i = 0; i < 60; i++) {
  items[i].style.left = items[i].basicLeft + 100 * phases[i % 5] +  
  'px';
  console.log(items[i].style.left);
}

变量阶段是一个全局范围的数组，在js文件的其他地方定义。 console.log()输出显示分配工作正常，但当我使用静态阶段数组而不是Math.sin()函数时，页面不会更新。
我已尝试过其他解决方案，但如果我没有通过Math.sin()的结果，则无效。我这样做是为了避免在每次迭代时都调用Math.sin。

这是CSS，但没有改变：

.mover {
  position: fixed;
  width: 256px;
  z-index: -1;
}

Answer 1

这是一种方式！

var items = document.querySelectorAll('.mover');
var phase = []
for (var i = 0; i < 5; i++) {
  phase.push(Math.sin((document.body.scrollTop / 1250) + (i % 5)));
}

for (var i = 0; i < 60; i++) {
  items[i].style.left = items[i].basicLeft + 100 * phases[i % 5] +  
  'px';
  console.log(items[i].style.left);
}

无法使用JavaScript设置样式属性

1 个答案: