Question

我正在尝试向不同方向移动多个图片，但在Firefox中显示[object HTMLSpanElement]，而在Chrome中，它在控制台中显示此错误：

未捕获的TypeError：无法读取属性＆＃39; style＆＃39;为null

任何类都有任何拼写错误，或者javascript代码中存在相同的错误。如果我从CSS中移除position: center，则会显示

TypeError：f1为空

＆＃13;

var f1 = document.getElementById("f1");
var f2 = document.getElementById("f2");
var f3 = document.getElementById("f3");
var f4 = document.getElementById("f4");
var f5 = document.getElementById("f5");
var f6 = document.getElementById("f6");


function initParallex() {
  f1.style.left = ((window.pageYOffset / 10) - 300) + "px";
  f2.style.left = (window.pageYOffset / 5) + "px";
  f3.style.left = ((window.pageYOffset / 8) + 100) + "px";
  f4.style.left = ((window.pageYOffset / 6) - 200) + "px";
  f4.style.left = (window.pageYOffset / 15) + "px";
  f5.style.left = ((window.pageYOffset / 12) - 300) + "px";
  f6.style.left = (window.pageYOffset / 20) + "px";
  f6.style.left = (window.pageYOffset / 15) + "px";

}
window.addEventListener("scroll", initParallex);

＆＃13;

* {
  padding: 0;
  margin: 0;
}
body {
  height: 100000px;
}
#wrapper {
  position: fixed;
  width: 100%;
  height: 100vh;
  background: url(../img/user-profile-bg.jpg) no-repeat;
  position: center;
  background-size: 100% 100vh;
  z-index: 1;
}
#wrapper > span {
  display: block;
  border: solid;
  z-index: 10;
}
#f1 {
  width: 300px;
  height: 200px;
  background: url(../img/3.jpg) no-repeat;
  top: -300px;
}
#f2 {
  width: 300px;
  height: 200px;
  background: url(../img/1.jpg) no-repeat;
  right: 100px;
}
#f3 {
  width: 300px;
  height: 200px;
  background: url(../img/5.jpg) no-repeat;
  left: 300px;
}
#f4 {
  width: 300px;
  height: 200px;
  background: url(../img/3.jpg) no-repeat;
  left: -300px;
}
#f5 {
  width: 300px;
  height: 200px;
  background: url(../img/1.jpg) no-repeat;
  left: 300px;
}
#f6 {
  width: 300px;
  height: 200px;
  background: url(../img/5.jpg) no-repeat;
  right: -300px;
}

＆＃13;

<html>

<head>
  <title>Parallex 1</title>
  <meta charset="utf-8" />
  <link rel="stylesheet" type="text/css" href="./css/style.css" />
  <script src="./js/custom.js"></script>
</head>

<body>
  <div id="wrapper">
    <span id="f1"></span>
    <span id="f2"></span>
    <span id="f3"></span>
    <span id="f4"></span>
    <span id="f5"></span>
    <span id="f6"></span>
  </div>
</body>

</html>

＆＃13;

创建视差来移动图像但图像移动

0 个答案: