[jQuery] Movimento Continuo DIV

Discussione in 'Snippet Javascript' iniziata da flameseeker, 8 Febbraio 2014.

Tag (etichette):
  1. flameseeker

    flameseeker Utente Attivo

    Registrato:
    27 Novembre 2013
    Messaggi:
    699
    Mi Piace Ricevuti:
    0
    Punteggio:
    0
    Occupazione:
    Web Developer
    Il presente script è un plugin jQuery che serve a far muovere continuamente un div avanti e indietro nella pagina.

    HTML:
    HTML:
    <div class="rail">
        <div id="runner"></div>
    </div>
    CSS:
    Codice:
    .rail{
        position:relative;
        overflow:hidden;
        height:100px;
    }
    
    #runner{
        position:absolute;
        left:0px;
        width:100px;
        height:100px;
        background-color:#008000;
    }
    Codice del plugin, da incollare in un file da includere poi nella pagina:
    Codice:
    /*** .goAndBack()
        *
        * Il plugin serve a gestire il movimento di un elemento che fa avanti e indietro
        * nella pagina all'interno di un preciso contenitore.
        * Il presente script è stato scritto per la comunità di mrwebmaster.it
        *
        * @url http://forum.mrwebmaster.it/snippet-javascript/38056-jquery-movimento-continuo-div.html
        * @author flameseeker
    */
    (function($)
    {
        var settings;
        
        $.fn.extend({
            goAndBack: function() {
                var runnerObj = this;
                
                return {
                    runner: runnerObj,
                    
                    settings: settings,
                    
                    isStopped: false,
                    
                    howToRun: function(obj) {
                        var self = this;
                        var pixelToRun = $(obj).parent().width()-$(obj).outerWidth();
                        var operation = $(obj).position()['left']==0? "+="+pixelToRun : "0";
            
                        $(obj).animate(
                            {left: operation}, 
                            this.settings.duration, 
                            function() {
                                if (self.settings.callback != null)
                                    self.settings.callback();
    
                                if (!self.isStopped)
                                    self.howToRun(obj);
                            }
                        );
                    },
                    
                    stop: function() {
                        this.isStopped = true;
                    },
                    
                    run: function(options) {
                        this.settings = $.extend({
                            duration: 4000,
                            callback: null
                        }, options);
                    
                        this.isStopped = false;
                        this.howToRun(this.runner);
                    }
                    
                };
            }
            
        });
        
    })(jQuery);

    Codice di esecuzione:
    Codice:
    var runner = $('#runner').goAndBack();
    runner.run({
        duration: 2000
    });
    Il metodo .run() accetta come parametri:
    • duration il tempo di durata delle animazioni in millisecondi
    • callback una callback che viene lanciata ogni volta che il corridore raggiunge una delle estremità della pagina

    l'oggetto così creato eredita anche un metodo .stop() per porre fine al movimento quando voluto.
     
    Ultima modifica: 8 Febbraio 2014
Sto caricando...

Condividi questa Pagina