问题描述
在这段代码中,我想对某些元素进行视差效果,但是无论我做什么,只有其中一个元素在移动,我不知道问题出在哪里:/
我尝试了各种不同的操作,但是不管最后创建了多少个obj,都只有最后一个表单数组(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>
解决方法
每次启动ParaElement时,使用innerHTML都将破坏以前用于抓取元素的选择器。这就是为什么只有最后一个在移动。这样的事情应该可以解决问题。
function ParaElement(x,y,z,id) {
this.x = x;
this.y = y;
this.z = z;
this.id = id;
this.htmlObj = document.getElementsByClassName("para-elmt")[this.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);
};
}
// 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 elements
for (let i = 0; i < paraElementsParams.length; i++) {
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++) {
// we add i at the end of the initialization using the current loop index
ParaElements.push(new ParaElement(...paraElementsParams[i],i));
}
$(document).on("scroll",function () {
for (let i = 0; i < ParaElements.length; i++) {
ParaElements[i].scrollHandler();
}
});