[jQuery] Movimento Continuo DIV

[flameseeker]

Il presente script è un plugin jQuery che serve a far muovere continuamente un div avanti e indietro nella pagina.

HTML:

<div class="rail">
    <div id="runner"></div>
</div>

CSS:

.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:

/*** .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:

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.