Question

我正在尝试实现这种背景效果，它改变了类似的背景，结果是毛躁，老电视效果，可以在this page上看到。

在css文件中，我有noise-bck--1，noise-bck--2，noise-bck--3，它们具有不同的背景，而在JavaScript中，我尝试使用setInterval循环遍历它们但是出了点问题

这些链接提供了效果图片，请下载：

这是我的代码：

(function() {
  var frontBck = document.querySelector('.noise-bck');
  var count = 0;
  var i;
  i = setInterval(update, 100);

  function update() {
    frontBck.classList.remove('noise-bck--1');
    frontBck.classList.remove('noise-bck--2');
    frontBck.classList.remove('noise-bck--3');
    count++;
    frontBck.classList.add('noise-bck--' + count);
    if (count == 4) {
      count = 1;
    }


  }

}());

body {
  margin: 0;
  padding: 0;
  font-size: 100%;
}
.noise-bck {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
.noise-bck--1 {
  background-image: url('bg1.png');
}
.noise-bck--2 {
  background-image: url('bg2.png');
}
.noise-bck--3 {
  background-image: url('bg3.png');
}

<div class="noise-bck"></div>

Answer 1

在您的代码段中，查询选择器正在查找名为noice-bck

的标记

var frontBck = document.querySelector('noice-bck');

尝试更改查询选择器以查找具有类noice-bck的元素。

var frontBck = document.querySelector('.noice-bck');

并且......你无限期地反击增加..

Answer 2

你应该使用CSS3动画而不是javascript计时器。查看示例here。

Answer 3

你的错误是结构性的。 document.querySelector('noise-bck')选择第一个<noise-bck>元素，该元素不是有效元素。您可能打算用class="noise-bck"选择元素（通过document.querySelector('.noise-bck')。最好分别编写setInterval()函数而不是变量。这是更正后的代码（注意我使用了body元素而不是你正在寻找的使用document.querySelector()。

＆＃13;

(function() {
  var frontBck = document.querySelector('.noise-bck');
  var count = 0;
  setInterval(update(), 100);

  function update() {
    frontBck.classList.remove('noise-bck--1');
    frontBck.classList.remove('noise-bck--2');
    frontBck.classList.remove('noise-bck--3');
    count++;
    frontBck.classList.add('noise-bck--' + count);


  }

}());

＆＃13;

body {
  margin: 0;
  padding: 0;
  font-size: 100%;
}
.noise-bck {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
.noise-bck--1 {
  background-image: url('bg1.png');
}
.noise-bck--2 {
  background-image: url('bg2.png');
}
.noise-bck--3 {
  background-image: url('bg3.png');
}

＆＃13;

<div class="noise-bck"></div>

＆＃13;

Answer 4

@Andrej Tomas - 看看here，我正在使用CSS3动画循环背景图像。

java.util.Date

如何实现此效果以及我的JavaScript代码有什么问题？

4 个答案: