Cursore del contenuto JQuery: best practice?

Question

Voglio creare un sito web che è fondamentalmente un dispositivo di scorrimento dei contenuti gigante, al caricamento della pagina vedresti div 1 (essenzialmente l'intero schermo) e quindi puoi fare clic sulla freccia giù per andare alla pagina 2 ecc., Quando arrivi alla pagina 2 Voglio anche essere in grado di andare a sinistra ea destra (solo a pagina 2), pensarlo come un cursore di immagine ma con i div ..

So che ci sono i plugin disponibili, ma sono piuttosto stravagante a scriverlo da solo, io Ho scritto un JQuery (di base) che funziona ma sembra troppo gonfio e volevo un modo migliore/più efficiente di farlo ... quello che sto cercando è il modo migliore per avvicinarsi a questo, non sto guardando per il codice che voglio imparare e migliorare ma non riesco a pensare al modo migliore per affrontarlo, è possibile utilizzare qualche tipo di istruzione switch? come faresti a farlo?

Avrò bisogno anche di essere sicuro di non poter scorrere oltre il numero di div, sto attualmente usando un var con istruzioni if ​​ma sento che ci deve essere un modo per combinare tutti in una funzione semplice?

JS è al di sotto e c'è anche una JSFiddle

Grazie!

http://jsfiddle.net/W4SVz/

$(function() { 
    var box = $('.box'); 
    TriggerClick = 0; 

    $("#down").click(function(){ 
    var height = $('.box').outerHeight(); 

    if(TriggerClick == 0){ 
     TriggerClick = 1; 
     $(box).stop().animate({top:'-='+height}, 500); 
    }else if(TriggerClick == 1){ 
     TriggerClick = 2; 
     $(box).stop().animate({top:'-='+height}, 500); 
    } 
    }); 

    $("#up").click(function(){ 
    var height = $('.box').outerHeight(); 

    if(TriggerClick == 2){ 
     TriggerClick = 1; 
     $(box).stop().animate({top:'+='+height}, 500); 
    }else if(TriggerClick == 1){ 
     TriggerClick = 0; 
     $(box).stop().animate({top:'+='+height}, 500); 
    } 
    }); 

    $("#left").click(function(){ 
    var height = $('.box').outerHeight(); 
    if(TriggerClick == 1){ 
     $(box).stop().animate({left:'-='+height}, 500); 
    } 
    }); 

    $("#right").click(function(){ 
    var height = $('.box').outerHeight(); 
    if(TriggerClick == 1){ 
     $(box).stop().animate({left:'+='+height}, 500); 
    } 
    }); 

}); 

Answer 1

Come un disclaimer, non sarà una buona idea per fare uno voi stessi per l'uso reale. Potrebbero verificarsi molti problemi di compatibilità sul diverso browser.

Tuttavia, per motivi di studio, sono felice di condividere la mia piccola conoscenza con voi.

Ho usato frequentemente il plugin jquery jscrollpane di Kelvin Luck. È un plugin leggero e configurabile. Secondo me, sarà anche un pezzo interessante da studiare per te. È possibile trovare il codice qui: http://jscrollpane.kelvinluck.com/script/jquery.jscrollpane.js

Ecco un uso molto semplice di questo plug-in. Puoi anche dare un'occhiata a http://www.kelvinluck.com/assets/jquery/jScrollPane/basic.html

Per quanto ne so, fa un uso forte del sistema di eventi jQuery. Sentiti libero di capirlo ... e magari migliorarlo ;-)

Buon divertimento!

Answer 2

In termini di codice, direi di provare a capire cosa è comune a tutti e quattro i casi (in alto a sinistra a destra) e astratto. Non penso che la variabile TriggerClick sia molto intuitiva, non è sicuro che sia necessaria.

Utilizzare un modello di plugin per aggiungere la funzione a jQuery (consultare Collegamento a Brainfeeders), quindi utilizzare tale funzione nel caricamento della pagina.

Ho giocato con l'idea ma non pubblico il mio codice - urlo se sei interessato a vederlo.