¿Cómo se puede hacer que un objeto se deslice en una página web?

Primero debe hacer que la posición principal del elemento sea relativa, luego el div que desea mover debe ser un posicionamiento absoluto

Entonces, tienes dos modos para soportar:

  1. Para IE y FF 3.x, use jQuery.animate (y anime las propiedades superior e izquierda).
  2. Para Chrome, Safari y FF 4.x, use la transición CSS3 (no haga animación en las propiedades izquierda / superior, sino que use traducir (…) ya que será acelerado por hardware en navegadores iOS y vistas web)

Entonces, en JS, solo puede probar si el navegador admite la transición, y luego hacer el # 1 si no es así, y el # 2 si lo hace.

Puede parecer complejo, pero muy simple. Al final, son solo 5 a 10 líneas de códigos reutilizables.

Aquí hay una forma de probar si la transición es compatible: http://www.bitsandpix.com/entry/…

Consejo: No verifique el modelo / versión del navegador, sino las capacidades del navegador.

Usar una biblioteca de JavaScript como JQuery para deslizar objetos es más fácil. Para hacerlo por su cuenta, deberá ajustar la posición de un objeto con el tiempo. Cada tantos milisegundos necesitará cambiar la posición de un objeto para dar la apariencia de movimiento. La frecuencia con la que cambia la posición y la distancia a la que se mueve el objeto determinarán la velocidad y la suavidad del movimiento.

Para controlar con qué frecuencia se cambia la posición, deberá usar setTimeout () (información aquí: http://www.w3schools.com/js/js_t …). Esto llamará a una función que cree para ajustar la posición del objeto. setTimeout () puede ser difícil de usar, así que nuevamente recomiendo algo como JQuery.

Para luego ajustar la posición de un objeto, deberá cambiar sus propiedades “superior” e “izquierda” en el CSS. El objeto deberá posicionarse “absoluto” o “relativo” para que pueda reconocer los valores “superior” e “izquierdo”.

(EDITAR: esta es la explicación no HTML5)

javascript nativo>
La posición de un objeto establecida en absoluto, con un índice z establecido en el más alto.
Javascript le permite moverlo después, usando sus coordenadas absolutas (izquierda, arriba) en un bucle, por ejemplo.
jquery>
animate () function!