Deslizando una página web entera
https://stackoverflow.com/questions/4403004
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianPregunta
¿Hay una manera de imitar la transición y la funcionalidad de "deslizamiento páginas enteras" como se ve en el iPhone, pero dentro de un navegador web en lugar?
nativaQuiero una página HTML para deslizarse sobre y una nueva página HTML para tomar su lugar después de la pulsación de un botón.
El botón no puede ser constante. Así que, como si fuera a tener una cabecera constante con los botones que se deslizaban contenido dentro de una caja a continuación, que sería incorrecto. Necesito deslizar toda la página web.
Diapositivas Would hechas en HTML5 sean lo que necesito? Gracias de antemano por cualquier ayuda!
Edit: También he estado pensando, posiblemente, la creación de la segunda cara del DIV de tamaño completo a lado con uno escondido de la página con "overflow: hidden" y luego usando transiciones CSS para golpear un botón y luego mover un DIV de la pantalla y el otro a la vista, pero no tengo idea de cómo hacerlo.
La otra parte realmente difícil de esto es que mis contenedores DIV deben ser dinámicos y 100% anchura y altura. No puedo utilizado dimensiones fijas.
EDIT:
Uso de las funciones ScrollTo y localscroll desarrollados por Ariel Flesler he sido capaz de completar el 99% de lo que yo estoy buscando. Sin embargo, al final del desarrollo, llegué a un gran obstáculo en el camino. Aquí está una imagen que espero que ayuda a explicar lo que estoy tratando de hacer:
Mi problema es que el área de contenido principal es una posición fija con un auto-y desbordamiento de modo que pueda mantener la barra de desplazamiento para el DIV entre medio de la cabecera y el pie de página. Pero el problema es que cuando inicio la animación de deslizamiento de mi DIV pulsando el botón de mi, el área de contenido fijo no se mueve y sólo la cabecera y pies de página movimiento. Si cambio de la posición de la zona principal de contenido a "relativas" todo se mueve como lo quiero, pero pierdo el posicionamiento del desplazamiento.
Si alguien pudiera resolver esto estaré en deuda con usted!
(que iba a publicar un enlace a lo que tengo, pero no puedo. Es un trabajo confidencial de una empresa)
Gracias de antemano !!
Editar Estoy trabajando en la revisión de toda esta información. Voy a responder en un par de días. Gracias a todos por que la entrada!
Solución
Actualmente estoy desarrollando algo que puede ser útil para usted. Utiliza el uno al lado del divs secundarios Ha considerado pero he encontrado dificultades en el uso de ancho de 100% debido a problemas con las barras de desplazamiento y las diferencias en los navegadores. Tengo superar esto mediante el establecimiento de los anchos de Javascript (jQuery), que ofrece una solución multi-navegador (probado en IE7, IE8, FF, Chrome, Safari, Opera).
Siéntase libre de tomar la mayor cantidad de código fuente como desee mediante la inspección de la fuente y si me necesitas a hablar a través de algo, házmelo saber.
http://madesignuk.com/uploader/
PS No estoy seguro al 100% en las normas relativas a publicar el enlace a mi sitio personal por lo que si es un problema para los moderadores, por favor hágamelo saber.
PPS El sitio está en desarrollo así que por favor trate de no burlarse de mí: p
Otros consejos
Se puede hacer que mediante la colocación de lado elementos a lado dentro de un contenedor con overflow:hidden, y sólo se mueven los elementos internos.
Esta es una prueba de concepto. No maneja el cambio de tamaño de la página después de que se haya cargado, pero al menos muestra el principio. He puesto tres diapositivas en el contenedor, pero el código es dinámico por lo que se puede colocar cualquier número que desee.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Page Slide</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
var w = $(window).width();
var h = $(window).height();
var slides = $('.Slides > div');
$('.SlideContainer').css({ height: (h-60) + 'px' });
$('.Slides').css({ width: slides.length + '00%' });
slides.css({ width: w + 'px' });
var pos = 0;
$('.Left').click(function(){
pos--;
$('.Slides').animate({ left: (pos * w) + 'px' });
});
$('.Right').click(function(){
pos++;
$('.Slides').animate({ left: (pos * w) + 'px' });
});
});
</script>
<style type="text/css">
body { margin: 0; padding: 0; }
.Header { position: absolute; left: 0; top: 0; width: 100%; height: 30px; line-height: 30px; text-align: center; background: #000; color: #fff; }
.Footer { position: absolute; left: 0; bottom: 0; width: 100%; height: 30px; line-height: 30px; text-align: center; background: #000; color: #fff; }
.SlideContainer { position: absolute; left: 0; top: 30px; width: 100%; overflow: hidden; }
.Slides { position: absolute; left: 0; top: 0; height: 100%; }
.Slides > div { float: left; height: 100%; overflow: scroll; }
.Slides .Content { margin-top: 100px; text-align: center; }
.Slides .Content a { font-size: 30px; }
</style>
</head>
<body>
<div class="Header">
absolutely positioned header
</div>
<div class="SlideContainer">
<div class="Slides">
<div class="Slide">
<div class="Content">
<h1>Slide 1</h1>
<a href="#" class="Left">«</a>
</div>
</div>
<div class="Slide">
<div class="Content">
<h1>Slide 2</h1>
<a href="#" class="Left">«</a>
<a href="#" class="Right">»</a>
</div>
</div>
<div class="Slide">
<div class="Content">
<h1>Slide 3</h1>
<a href="#" class="Right">»</a>
</div>
</div>
</div>
</div>
<div class="Footer">
absolutely positioned footer
</div>
</body>
</html>
Editar
Ahora jsFiddle es nuevo, por lo que puede probarlo aquí: jsfiddle.net/9VttC
¿Has mirado en LocalScroll ? Esto hará que todos los enlaces de hash desplazable dentro del contenedor se defina. Usted tendría que establecer el ancho de diapositivas sin embargo, ya que necesitará para flotar ellos.
Utilice el atributo CSS scrollTop: desea desplazarse hacia abajo 100px en su área principal de contenido?
Sólo hacer lo siguiente:
var newScrollTop = document.getElementById("main_content_area").scrollTop + 100;
$("#main_content_area").animate({scrollTop: newScrollTop}, 500);
La segunda línea se compone con jQuery, pero sólo recuerda el principio:. Afecta el nuevo valor scrollTop a CSS de su div main_content_area
Trate jQuery Cycle plug-in.
http://jquery.malsup.com/cycle/
Se han proporcionado gran cantidad de código de ejemplo y tutoriales, así que es fácil para que usted construya su propia manera.
Si he entendido bien, funciona el método ScrollTo, pero sólo si se cambia la posición: fijo a la posición: relativa, lo que tiene la consecuencia de hacer el tramo más allá de la barra de desplazamiento div desplazamiento
¿No sería más fácil poner un div contenedor alrededor de su área de contenido principal con un margen superior a la cuenta para el encabezado y un margen inferior a cuenta para el pie de página y configurarlo para tener desbordamiento: libro y de uso la función scrollTo dentro de ella?
El equipo de Google Chrome hizo 20 cosas que he aprendido sobre Internet y la web que tiene este efecto.
Al igual que un ejemplo teórico, pero me gustaría crear páginas HTML estáticas y utilizar jQuery para cargar el contenido de los mismos (para proporcionar compatibilidad). El problema principal sería el desplazamiento.
Yo uso jQuery para calcular el ancho del navegador, conjunto que sea el ancho de la <body>, y luego overflow: hidden conjunto. A continuación, basta con crear una caja de contenido con posición absoluta, y deslice ambos a la vez.
voy a publicar algo de código más tarde, pero esto es lo que iba a comenzar con (yo, siendo un violinista JS patéticamente incompetente).
Se podría utilizar algo como Coda deslizante , y tienen el contenido de la diapositiva ser toda la página.
jQuery pageSlide es una otra alternativa.
