[jQuery] Movimento Continuo DIV

flameseeker

Utente Attivo
27 Nov 2013
699
0
0
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:
Discussioni simili
Autore Titolo Forum Risposte Data
F [risolto] movimento continuo jquery jQuery 4
F effetto movimento immagini jquery jQuery 3
M Come selezionare e deselezionare radiobutton con jquery jQuery 1
M Come validare textarea con jquery jQuery 0
R Aggiornare record mysql con Ajax, jQuery e php Ajax 2
P Funzione jQuery Ajax invio file a php jQuery 1
Cosina Menu fisso copre i titoli quando cliccati nel sommario jQuery Javascript 4
MarcoGrazia jquery validate() controllo checkbox jQuery 2
D assegnare risultato di una jquery ad una text Javascript 2
felino [JQuery] Append dopo ultimo ul li del primo livello jQuery 2
A php metodo post jquery non da mai errore jQuery 4
T problema con select dinamica con jquery Javascript 0
P jquery .load jQuery 10
E Div che scompare con scroll jquery Javascript 0
T script jquery non funziona più dopo il passaggio a MVC jQuery 5
B jQuery - hide & show li items jQuery 13
Y jQuery Animation Switch On Off jQuery 0
claudio_lorenzo [Javascript] aiuto su jquery per calcolo altezze dom Javascript 1
O [Javascript] Conflitto Jquery: forse... Javascript 0
MarcoGrazia jquery validate, necessità di validare almeno un elemento select su due jQuery 1
M inserire i dati ottenuti da una jquery in una tabella già esistente jQuery 1
D Jquery, conflitto tra loro risolvibile? jQuery 7
M Filtrare risultati con valori checkbox passati con jquery jQuery 2
Tommy03 Variabile PHP dentro a JQuery PHP 3
L Problema jQuery validation AJAX (PHP 7) PHP 6
G Campo HTML input file con jQuery jQuery 0
P Jquery event nel foreach php jQuery 3
M leggere con jquery/ajax in una function javascript record di database sql server Javascript 0
A [Javascript] Ajax, Jquery e PHP Javascript 1
trattorino Mentions Auto Suggesting da jquery a php PHP 2
X Problema con jquery e ajax jQuery 2
G Inserzione script nella pagina html per jquery jQuery 8
MarcoGrazia Validazione forum con jquery.validate jQuery 2
Shyson Smoot scrolling jQuery nella pagina jQuery 0
felino [Javascript] [jQuery] Slick Carousel: visualizzare una porzione dell'immagine successiva Javascript 0
L Scelta form con jquery jQuery 1
F [Javascript] Aprire file tramite jquery Javascript 0
R Aiuto Jquery jQuery 1
G [HTML] Jquery e tooltipster's jQuery 5
I Jquery fadeout-fadein html data jQuery 0
trattorino Estrarre Nome Utente jquery div php PHP 9
L jquery e json controllo valori da determinate chiavi - keys jQuery 0
B PHP e JQUERY per scrivere codice html dinamicamente PHP 2
F [Javascript] Jquery radio Javascript 2
otto9due Errore ricorsivo jquery, non capisco da cosa dipenda.. jQuery 1
F [Javascript] Problema funzione jquery con elementi css esterni Javascript 1
P leggere file .csv con javascript/jquery Javascript 11
G [Javascript] jQuery PHP MySql - inserire variabile nel DataBase Javascript 8
G [Javascript] Ricalcolo Totale jQuery Javascript 7
G [Javascript] prenotazione posti a teatro jQuery-Seat-Charts Javascript 3

Discussioni simili