我希望浅蓝色方 block 向右移动，橙色方 block 同时向下移动。但它们都是对 Angular 线。我明白这里发生了什么，但我不明白为什么会发生或如何解决它。看起来两个函数调用都影响了两个元素。谢谢!
jsfiddle:https://jsfiddle.net/8apLsmp7/1/
function moveElem(dir, xPos, yPos, element, index, container){
//Getting width and height of container and item elements
var elem = document.getElementsByClassName(element);
var w = elem[index].offsetWidth;
var h = elem[index].offsetHeight;
var contw = document.getElementById(container).offsetWidth;
var conth = document.getElementById(container).offsetHeight;
var vertEnd = contw - w;
var horiEnd = conth - h;
//clean up variables to make sure they comply with the width and height of the container
if (xPos > vertEnd){
x = vertEnd;
} else if (xPos < 0){
x = 0;
} else {
x = xPos;
}
if (yPos > horiEnd){
y = horiEnd;
} else if (yPos < 0){
y = 0;
} else {
y = yPos;
}
//position the element
elem[index].style.left = x + 'px';
elem[index].style.top = y + 'px';
//set timer, speed and friction
var timer = setInterval(frame, 5);
var spd = 10;
var friction = 0.987;
//what runs every interval
function frame(){
//check if to move right
if (dir === "right"){
if (x >= vertEnd){
clearInterval(timer);
x = vertEnd;
elem[index].style.left = x + 'px';
elem[index].style.top = y + 'px';
} else {
elem[index].style.top = y + 'px';
elem[index].style.left = x + 'px';
x += spd;
spd *= friction;
}
//check if to move left
} else if (dir === "left"){
if (x <= 0){
clearInterval(timer);
x = 0;
elem[index].style.left = x + 'px';
elem[index].style.top = y + 'px';
} else {
elem[index].style.top = y + 'px';
elem[index].style.left = x + 'px';
x -= spd;
spd *= friction;
}
//check if to move up
} else if (dir === "up"){
if (y <= 0){
clearInterval(timer);
y = 0;
elem[index].style.left = x + 'px';
elem[index].style.top = y + 'px';
} else {
elem[index].style.left = x + 'px';
elem[index].style.top = y + 'px';
y -= spd;
spd *= friction;
}
//check if to move down
} else if (dir === "down"){
if (y >= horiEnd){
clearInterval(timer);
y = horiEnd;
elem[index].style.left = x + 'px';
elem[index].style.top = y + 'px';
} else {
elem[index].style.left = x + 'px';
elem[index].style.top = y + 'px';
y += spd;
spd *= friction;
}
}
}
}
moveElem("right", 0, 0, "item", 0, "cont");
moveElem("down", 0, 0, "item", 1, "cont");
最佳答案
您的原始代码中可能存在一些错误。试试this 。 (不整洁的版本 - 你可以稍后清理它)
<body>
<div id="cont">
<div id="item1" class="item"></div>
<div id="item2" class="item"></div>
</div>
</body>
//what runs every interval
function frame(obj) {
const {
dir,
spd,
friction,
elem,
vertEnd,
horiEnd,
x,
y
} = obj;
//check if to move right
if (dir === "right") {
if (x >= vertEnd) {
//clearInterval(timer);
obj.x = vertEnd;
elem.style.left = x + 'px';
elem.style.top = y + 'px';
} else {
elem.style.top = y + 'px';
elem.style.left = x + 'px';
obj.x += spd;
obj.spd *= friction;
}
//check if to move left
} else if (dir === "left") {
if (x <= 0) {
//clearInterval(timer);
obj.x = 0;
elem.style.left = x + 'px';
elem.style.top = y + 'px';
} else {
elem.style.top = y + 'px';
elem.style.left = x + 'px';
obj.x -= spd;
obj.spd *= friction;
}
//check if to move up
} else if (dir === "up") {
if (y <= 0) {
//clearInterval(timer);
obj.y = 0;
elem.style.left = x + 'px';
elem.style.top = y + 'px';
} else {
elem.style.left = x + 'px';
elem.style.top = y + 'px';
obj.y -= spd;
obj.spd *= friction;
}
//check if to move down
} else if (dir === "down") {
if (y >= horiEnd) {
//clearInterval(timer);
obj.y = horiEnd;
elem.style.left = x + 'px';
elem.style.top = y + 'px';
} else {
elem.style.left = x + 'px';
elem.style.top = y + 'px';
obj.y += spd;
obj.spd *= friction;
}
}
}
function moveElem(dir, xPos, yPos, element, index, container) {
//Getting width and height of container and item elements
var elem = document.getElementById(element);
var w = elem.offsetWidth;
var h = elem.offsetHeight;
var contw = document.getElementById(container).offsetWidth;
var conth = document.getElementById(container).offsetHeight;
var vertEnd = contw - w;
var horiEnd = conth - h;
//clean up variables to make sure they comply with the width and height of the container
if (xPos > vertEnd) {
x = vertEnd;
} else if (xPos < 0) {
x = 0;
} else {
x = xPos;
}
if (yPos > horiEnd) {
y = horiEnd;
} else if (yPos < 0) {
y = 0;
} else {
y = yPos;
}
//position the element
elem.style.left = x + 'px';
elem.style.top = y + 'px';
//set timer, speed and friction
var spd = 10;
var friction = 0.987;
var obj = {
dir,
spd,
friction,
elem,
vertEnd,
horiEnd,
x,
y
};
var timer = setInterval(function() {
frame(obj)
}, 5);
}
moveElem("right", 0, 0, "item1", 0, "cont");
moveElem("down", 0, 0, "item2", 1, "cont")
关于用于移动元素的 javascript 函数正在访问比应有的元素更多的元素。，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46811970/