Come fare qualcosa di simile?

di il
1 risposte

Come fare qualcosa di simile?

Mi piacerebbe poter ricreare una navigazione simile a quella del sito Gucci

http://www.gucci.com/it/italian/it/spring-summer-08/womens-runway/#ss08_rtww_1

Sono assolutamente digiuna di ajax.... qualcuno può indicrmi un sito dove trovare effetti già realizzati, magari simili a quelli nel link postato qui sopra? O anche un sito dove potr iniziare a capire qualcosa di ajax (nessun problema se è in inglese).

Grazie a tutti

1 Risposte

  • Re: Come fare qualcosa di simile?

    E' abbastanza semplice, si capisce anche dalle scrollbar sotto...
    allora, basta fare un div e metterci dentro tutte le foto che vuoi far scorrere, specificando nello stile
    overflow:auto
    (se vuoi far vedere le scrollbar) oppure
    overflow:hidden
    (se non vuoi farle vedere).
    dopo di che, metti i bottoncini che vuoi con il collegamento ad una funzione che ti modifichi il parametro "margin-left" del tuo div scalandolo ogni volta di un tot.
    per esempio, la funzione di javascript, utilizzando la libreria , sarà qualcosa del genere:
    
    /* funzione che scala di "tot" verso sinistra (se possibile) il div "slider" */
    function scala_div_sx(tot)
    {
    	var marginLeft = $("#slider").css("margin-left");
    	var i = marginLeft.indexOf('px');
    	var num = marginLeft.substr(0,i);
                if (num > 0)
            	num = num-tot;
    	//$("#slider").css({"margin-left":num+"px"});
    	$("#slider").animate({"marginLeft":num+"px"},{"duration":1200,"easing":"bounceout"});
    
    }
    /* funzione che scala di "tot" verso destra (se possibile) il div "slider" */
    function scala_div_sx(tot)
    {
    	var marginLeft = $("#slider").css("margin-left");
    	var i = marginLeft.indexOf('px');
    	var num = marginLeft.substr(0,i);
    	var width = $("#slider").css("width");
    	var j = width.indexOf('px');
    	var num2 = width.substr(0,i);
                if (num < (num2-tot))
            	num = num+tot;
    	//$("#slider").css({"margin-left":num+"px"});
    	$("#slider").animate({"marginLeft":num+"px"},{"duration":1200,"easing":"bounceout"});
    
    }
    
    dove, nel corpo, ci sarà il divider contenente le foto
    <div id="slider">contenuto</div>
    Spero di essere stato utile, scrivimi per ogni chiarimento...
Devi accedere o registrarti per scrivere nel forum
1 risposte