类问题中的方法(不能更新所有对象,只有一个受影响)

在这段代码中,我想用一些元素产生视差效果,但无论我做什么,只有一个元素在移动,我不知道问题出在哪里:/


我尝试了不同的东西,但无论制作了多少对象,只有最后一个表格数组(ParaElements)在移动。


function ParaElement(x, y, z, id) {

  this.x = x;

  this.y = y;

  this.z = z;

  this.id = id;


  document.getElementById("paralax").innerHTML +=

    '<div class="para-elmt"> </div>';


  this.htmlObj = document.getElementsByClassName("para-elmt")[id];


  this.positionChange = function (tx, ty) {

    this.htmlObj.style.top = String(tx) + "px";

    this.htmlObj.style.left = String(ty) + "px";

    this.htmlObj.style.zIndex = this.z;

  };


  this.positionChange(this.x, this.y);


  this.scrollHandler = function () {

    let scrollPosition = document.documentElement.scrollTop;

    let tx = this.x - scrollPosition / this.z;

    let ty = this.y;

    this.positionChange(tx, ty);

  };

}


var ParaElements = [];

ParaElements.push(new ParaElement("30", "100", "25", "0"));

ParaElements.push(new ParaElement("100", "300", "50", "1"));

ParaElements.push(new ParaElement("200", "200", "10", "2"));


$(document).on("scroll", function () {

  for (let i = 0; i < ParaElements.length; i++) {

    ParaElements[i].scrollHandler();

  }

});

body {

  min-height: 2000px;

}

#paralax {

  width: 100%;

  height: 100%;

  position: fixed;

  margin: 0;

}

#paralax .para-elmt {

  position: absolute;

  width: 100px;

  height: 100px;

  border-radius: 50px;

  background-color: teal;

  z-index: 9999;

}

    <html>

    <body>

      <div id="paralax">


      </div>

          <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"

        integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"

        crossorigin="anonymous"></script>

    </body>


月关宝盒
浏览 76回答 1
1回答

慕斯709654

通过在每次启动 ParaElement 时使用 innerHTML,您将破坏以前用来抓取元素的选择器。这就是为什么只有最后一个在移动。这样的事情应该可以解决问题。function ParaElement(x, y, z, id) {&nbsp; this.x = x;&nbsp; this.y = y;&nbsp; this.z = z;&nbsp; this.id = id;&nbsp; this.htmlObj = document.getElementsByClassName("para-elmt")[this.id];&nbsp; this.positionChange = function (tx, ty) {&nbsp; &nbsp; this.htmlObj.style.top = String(tx) + "px";&nbsp; &nbsp; this.htmlObj.style.left = String(ty) + "px";&nbsp; &nbsp; this.htmlObj.style.zIndex = this.z;&nbsp; };&nbsp; this.positionChange(this.x, this.y);&nbsp; this.scrollHandler = function () {&nbsp; &nbsp; let scrollPosition = document.documentElement.scrollTop;&nbsp; &nbsp; let tx = this.x - scrollPosition / this.z;&nbsp; &nbsp; let ty = this.y;&nbsp; &nbsp; this.positionChange(tx, ty);&nbsp; };}// Let's define the number of element we want, by creating an array with the differents parameters.// I removed the last parameter from the arrays because it can be added directly when we will loop over the arrays.let paraElementsParams = [["30", "100", "25"], ["100", "300", "50"], ["200", "200", "10"]]var ParaElements = [];// Instead of initializing by hand, let's loop over the elements in our parameters array so we can first create all the dom elementsfor (let i = 0; i < paraElementsParams.length; i++) {&nbsp; document.getElementById("paralax").innerHTML += '<div class="para-elmt"> </div>';}// Then, let's loop again so we can initialize our elements without losing the node references.for (let i = 0; i < paraElementsParams.length; i++) {&nbsp; // we add i at the end of the initialization using the current loop index&nbsp; ParaElements.push(new ParaElement(...paraElementsParams[i], i));}$(document).on("scroll", function () {&nbsp; for (let i = 0; i < ParaElements.length; i++) {&nbsp; &nbsp; ParaElements[i].scrollHandler();&nbsp;&nbsp; }});
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript