Desplazamiento Horizontal

Lanix_0 · #1 (**permalink**) 03/01/2012, 14:54

Hola que tal amigos, hoy vengo con esta duda,

Estoy realizando una pagina donde se supone que presionara un botón "siguiente" o "Atras" y un div, un tipo carrusel con imagenes pero este lo quiero hacer con un div y un formulario.

Como consigo el efecto de que salgan de la pagina y aparesca otro ??

Se me olvidaba, si puede ser con jquery

Lanix_0 · #2 (**permalink**) 03/01/2012, 22:22

Hola Foreros, ya encontre la solución, la verdad no se si sea la mas correcta pero me sirvió, y pues les comparto el código y dejo el link de descarga para que descargue en archivo completo, el código lo escribo tambien aqui, los efecto fueron con la ayuda de jquery.

este es el link del ejemplo funcionando espero les guste mi aporte saludos

*el ejemplo cumple con el requisito principal la funcion inicia,fin y es reutilizable - - puedes agregar mas divs siguiendo la numeracion asi tengas dos divs o tengas 1000 se reutiliza las funciones

http://www.megaupload.com/?d=MG8G6XAU

Empezemos con el HTML

Código HTML:

Ver original<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link href="doc_css/index.css" rel="stylesheet"/>
        <script src="doc_js/ui/js/jquery-1.6.2.min.js" type="text/javascript"></script>
        <script src="doc_js/core.js" type="text/javascript"></script>
        <title>New Web Project</title>
    </head>
    <body>
        <div id="_header">
            
        </div>
        <div id="_bodyContent" title="0">
            <div id="content_0" class="contentStyle">
                div 1
            </div>
            <div id="content_1" class="contentStyle" style="left:150%;">
                div 2
            </div>
            <div id="content_2" class="contentStyle" style="left:150%;">
                div 3
            </div>
            <div id="content_3" class="contentStyle" style="left:150%;">
                div 4
            </div>
            <div id="content_4" class="contentStyle" style="left:150%;">
                div 5
            </div>
        </div>
        <div id="btn_next">
                
        </div>
        <div id="btn_previous" style="visibility: hidden;">
                
        </div>
        <div id="_footer">
            
        </div>
    </body>
</html>

mandamos a llamar a dos archivos js el primero es el jquery que esta disponible desde la pagina de jquery y el segundo archivo es el que contiene las instrucciones para el carrusel.

core.js

Código Javascript:

Ver original/**
 * @author developerWCS 02-ene-2012
 */
 
$(document).ready(function ()
    {
        $("#btn_next").click(function() //Cuando de click en el div de siguiente ejecutara lo siguiente
        {
            if ($("#_bodyContent").attr("title")>=$("#_bodyContent div").length) //preguntamos si el valor que tiene el atributo title es menor al numero de elementos hijo del div #_bodyContent
            {
                $("#_bodyContent").attr("title",$("#_bodyContent div").length) //si la condicion se cumple asignamos el como valor el numero de hijos del div padre (#_bodyContent)
                //por que esta condicion ya que el atributo lo ocupamos como referencia para saber cuantas veces debe ser 
                //utilizado el carrusel, sin que nos mande un espacio en blanco
            }
            else //negacion
            {
                divActual = $("#_bodyContent").attr("title")*1; //capturamos el valor del title del div y lo multiplicamos por 1 ya que si no lo multiplicamos el valor lo tomara como texto, esto para saber que div sigue
                $("#content_"+divActual).animate({left: ('-50%')},1000); //concatenamos el nombre previo del div con el numero de div actual y lo animamos para que vaya a -50% de la pantalla en horizontal
                $("#content_"+(divActual+1)).animate({left: ('50%')},1000); //lo mismo que el paso anterior solo que le aumentamos 1 a el div actual y lo animams para que se posiscione al 50% de la pantalla
                $("#_bodyContent").attr("title",($("#_bodyContent").attr("title") * 1)+1); // Actualizamos el valor del title con el actual mas 1, esto es como referencia para saber en que div estamos
            }
            if ($("#_bodyContent").attr("title")>=$("#_bodyContent div").length-1) //esta condicion es para saber si ocultamos el div de siguiente
            {
                $("#btn_next").attr("style","visibility:hidden");
            }
            if ($("#_bodyContent").attr("title")>=0) // esta condicion es para saber si mostramos el div de previo (o atras)
            {
                $("#btn_previous").attr("style","visibility:visible");
            }
        });
        $("#btn_previous").click(function() //esta funcion es exactamente igual que la anterior pero con valores distintos solo cambio la posision a un 150 % horizontal
        {
            if ($("#_bodyContent").attr("title")<=1)
            {
                $("#btn_previous").attr("style","visibility:hidden");
            }
            if ($("#_bodyContent").attr("title")>=1)
            {
                $("#btn_next").attr("style","visibility:visible");
            }
            divActual = $("#_bodyContent").attr("title")*1;
            $("#content_"+divActual).animate({left: ('150%')},1000);
            $("#content_"+(divActual-1)).animate({left: ('50%')},1000);
            $("#_bodyContent").attr("title",($("#_bodyContent").attr("title") * 1)-1);
            
        });
    }
);

y estilos css

Código CSS:

Ver original/*
 * 02 - Ene - 2012
 * @developerWCS
 */
 
/*****************
 **** </> ********
 *****************/
 
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, input, select, table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
}
body {
    overflow:hidden;
}
/*****************
 ******* # *******
 *****************/
#_header
{
    height: 55px;
    background: #08519C;
}
#btn_next
{
    height: 120px;
    width:50px;
    z-index:10;
    float:left;
    position:absolute;
    left:100%;
    top:50%;
    margin-top:-60px;
    margin-left:-50px;
    border:1px solid #BBBBBB;
    background-image:url("../doc_img/_bkRows.png");
    background-position:-50px;
    -webkit-border-radius: 5px;
}
#btn_next:hover
{
    background:#EFEFEF;
    background-image:url("../doc_img/_rows.png");
    background-position:-50px;
}
#btn_previous
{
    height: 120px;
    width:50px;
    z-index:11;
    float:left;
    position:absolute;
    left:0%;
    top:50%;
    margin-top:-60px;
    border:1px solid #BBBBBB;
    background-image:url("../doc_img/_bkRows.png");
    -webkit-border-radius: 5px;
}
#btn_previous:hover
{
    background:#EFEFEF;
    background-image:url("../doc_img/_rows.png");
}
#_bodyContent
{
    margin-top:150px;
}
/*****************
 ******* . *******
 *****************/
 
.contentStyle
{
    height:400px;
    width:800px;
    float:left;
    left:50%;
    margin-left:-400px;
    position:absolute;
    -webkit-border-radius: 10px;
    background: #C6DBEF;
}