在这段代码中，我想用一些元素产生视差效果，但无论我做什么，只有一个元素在移动，我不知道问题出在哪里：/我尝试了不同的东西，但无论制作了多少对象，只有最后一个表格数组（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>
1 回答
慕斯709654
TA贡献1840条经验 获得超5个赞
通过在每次启动 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();
}
});
添加回答
举报
0/150
提交
取消