MRW.it Forum
  • Home
  • Forum
  • Fare Web
  • Snippet
  • Snippet Javascript

[jQuery] Movimento Continuo DIV

  • Creatore Discussione Creatore Discussione flameseeker
  • Data di inizio Data di inizio 8 Feb 2014
  • Tag Tag
    div jquery movimento continuo
flameseeker

flameseeker

Utente Attivo
27 Nov 2013
699
0
0
  • 8 Feb 2014
  • #1
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 Feb 2014
Devi accedere o registrarti per poter rispondere.

Discussioni simili

F
[risolto] movimento continuo jquery
  • Fabio90
  • 4 Feb 2014
  • jQuery
Risposte
4
Visite
2K
jQuery 8 Feb 2014
Fabio90
F
F
effetto movimento immagini jquery
  • Fabio90
  • 7 Mag 2014
  • jQuery
Risposte
3
Visite
3K
jQuery 8 Mag 2014
criric
D
Jquery - modifica elemenento onlick
  • Dantevil
  • 1 Apr 2023
  • jQuery
Risposte
1
Visite
2K
jQuery 2 Apr 2023
WmbertSea
E
Problema jquery Success
  • Emanuele85
  • 15 Gen 2023
  • jQuery
Risposte
2
Visite
2K
jQuery 19 Gen 2023
marino51
R
jquery che cambia css di un elemento non mi funziona sulla pagina caricata da ajax
  • robyspider77
  • 3 Ago 2022
  • Ajax
Risposte
5
Visite
3K
Ajax 4 Ago 2022
robyspider77
R
E
PHP & jQuery
  • edo64
  • 16 Lug 2022
  • PHP
Risposte
8
Visite
2K
PHP 31 Lug 2022
WmbertSea
P
jquery refresh div non funziona
  • psicona
  • 6 Feb 2022
  • Javascript
Risposte
0
Visite
992
Javascript 6 Feb 2022
psicona
P
P
lanciare script asp (o php) da jquery
  • psicona
  • 2 Feb 2022
  • Javascript
Risposte
1
Visite
2K
Javascript 7 Feb 2022
otto9due
T
aiuto per trasformare un quiz fatto in JS in un quiz in JQUERY
  • theseo
  • 6 Gen 2022
  • jQuery
Risposte
0
Visite
3K
jQuery 6 Gen 2022
theseo
T
Z
CSS Slideshow senza JS e JQUERY
  • z.cristiano
  • 12 Ott 2021
  • HTML e CSS
Risposte
2
Visite
2K
HTML e CSS 6 Nov 2021
z.cristiano
Z
Z
  • Bloccata
CSS Slideshow senza JS e JQUERY
  • z.cristiano
  • 11 Ott 2021
  • HTML e CSS
Risposte
2
Visite
3K
HTML e CSS 12 Ott 2021
Max 1
Validazione remota tramite plugin (jquery validate)
  • MarcoGrazia
  • 4 Ago 2021
  • Snippet Javascript
Risposte
0
Visite
6K
Snippet Javascript 4 Ago 2021
MarcoGrazia
M
Come selezionare e deselezionare radiobutton con jquery
  • migo80
  • 9 Giu 2021
  • jQuery
Risposte
1
Visite
3K
jQuery 9 Giu 2021
migo80
M
M
Come validare textarea con jquery
  • migo80
  • 21 Mag 2021
  • jQuery
Risposte
0
Visite
2K
jQuery 21 Mag 2021
migo80
M
R
Aggiornare record mysql con Ajax, jQuery e php
  • Riccardo Contu
  • 19 Apr 2021
  • Ajax
Risposte
2
Visite
6K
Ajax 19 Apr 2021
Tommy03
P
Funzione jQuery Ajax invio file a php
  • Peterrey76
  • 9 Mar 2021
  • jQuery
Risposte
1
Visite
3K
jQuery 9 Mar 2021
Max 1
Menu fisso copre i titoli quando cliccati nel sommario jQuery
  • Cosina
  • 22 Dic 2020
  • Javascript
Risposte
4
Visite
2K
Javascript 23 Dic 2020
WmbertSea
jquery validate() controllo checkbox
  • MarcoGrazia
  • 18 Nov 2020
  • jQuery
Risposte
2
Visite
3K
jQuery 18 Nov 2020
MarcoGrazia
D
assegnare risultato di una jquery ad una text
  • Domenico2013
  • 18 Ott 2020
  • Javascript
Risposte
2
Visite
1K
Javascript 20 Ott 2020
Domenico2013
D
[JQuery] Append dopo ultimo ul li del primo livello
  • felino
  • 11 Giu 2020
  • jQuery
Risposte
2
Visite
3K
jQuery 12 Giu 2020
felino
Condividi:
Facebook X (Twitter) LinkedIn WhatsApp e-mail Condividi Link
  • Home
  • Forum
  • Fare Web
  • Snippet
  • Snippet Javascript
  • Italiano
  • Termini e condizioni d'uso del sito
  • Policy Privacy
  • Aiuto
  • Home
Community platform by XenForo® © 2010-2024 XenForo Ltd. | Traduzione a cura di XenForo Italia
Menu
Accedi

Registrati

  • Home
  • Forum
    • Nuovi Messaggi
    • Cerca...
  • Novità
    • Featured content
    • Nuovi Messaggi
    • Ultime Attività
X

Privacy & Transparency

We use cookies and similar technologies for the following purposes:

  • Personalized ads and content
  • Content measurement and audience insights

Do you accept cookies and these technologies?

X

Privacy & Transparency

We use cookies and similar technologies for the following purposes:

  • Personalized ads and content
  • Content measurement and audience insights

Do you accept cookies and these technologies?