0
212
ViewsMovimiento de traslación de salto de imagen a la última posición
Tengo algunos botones que mueven una imagen con traducción, pero cuando presiono un botón, luego otro y luego el primero nuevamente, salta a donde estaba la última vez que presioné el primer botón.
Aquí está el JavaScript responsable de mover la imagen.
function transform(side, n) { let translatePixels = 0; if (side == 'right') { return function(e) { translatePixels += n; player.style.transform = `translate(${translatePixels}px)`; } } if (side == 'left') { return function(e) { translatePixels -= n; player.style.transform = `translate(${translatePixels}px)`; } } if (side == 'top') { return function(e) { translatePixels -= n; player.style.transform = `translateY(${translatePixels}px)`; } } if (side == 'bottom') { return function(e) { translatePixels += n; player.style.transform = `translateY(${translatePixels}px)`; } } } const translateRight = transform('right', 8); const translateLeft = transform('left', 8); const translateTop = transform('top', 8); const translateBottom = transform('bottom', 8);1 answers
Answer question0
básicamente creando dos objetos dentro de una variable JSON. x e y podemos resolver esto.
Además, uso la declaración de switch para reducir el código.
player.style.transform = `translate(${x}px, ${y}px)`;el
translate()en css tiene dos parámetros, el primero para x, el segundo para y.
¡así que agregamos al final el estilo solo una vez!
mueva la variable translatePixels fuera de la función.
haciendo esto el -= y += trabajaremos.
este error ocurre porque cada vez que hace clic en un botón, la variable se restablecerá a 0.
si coloca la variable fuera, la única primera vez que el usuario abre el sitio web será 0, las otras veces funcionará bien (con valor guardado)
let player = document.querySelector("#player"); let translatePixels = { x: 0, y: 0 }; let { x, y } = translatePixels; function transform(side, n) { switch (side) { case "right": x += n; break; case "left": x -= n; break; case "bottom": y += n; break; case "top": y -= n; break; } player.style.transform = `translate(${x}px, ${y}px)`; } <div id="player">I am the player!</div> <div id="container"> <button onclick="transform('top', 8)">top</button> <button onclick="transform('bottom', 8)">bottom</button> <button onclick="transform('left', 8)">left</button> <button onclick="transform('right', 8)">right</button> </div>