javascript de autoaprendizaje Quería crear una especie de menú como Netflix donde, a medida que se desplaza hacia la derecha o hacia la izquierda, puede pasar por programas / películas, sin embargo, sería con flechas hacia la izquierda y hacia la derecha, es decir, si me moviera hacia la derecha, el bloque 2 estaría en el bloque 1 posición, bloque3 en bloque2, etc.
Estaba pensando que podría asignar a cada bloque una posición en una matriz: var menuBar = [block1, block2, block3, block4]; luego iterar a través de la matriz
for(var i=0; i < menuBar.length(); i++){ switch (e.key) { case 'ArrowLeft': i--; GoThroughMenu(); break; case 'ArrowRight': i++; GoThroughMenu(); break; }y GoThroughMenu() movería los bloques
block1.style.left = menuBar[i].style.left + 'px'; block1.style.top = menuBar[i].style.top + 'px';En este momento nada se mueve, ¿hay errores en la forma en que estoy haciendo esto?
Las propiedades CSS left y top solo funcionan con un valor no position: static (que es el valor de position predeterminado de todos los elementos).
Intente dar a los elementos de la barra de menú una position: relative; .
Simplemente agregue position: relative; en #caja. funcionará bien.
Consulte aquí el ejemplo de trabajo https://jsfiddle.net/milytulip/x52goy3s/2/
#box{ width: 1000px; height: 200px; background-color: black; position: relative; }