martedì 3 gennaio 2012

JQuery Bubbles

versione 1.0 Scarica

JQuery Bubbles è un plugin per JQuery che visualizza delle bolle di sapone galleggianti sul vostro sito.
Può essere utilizzato con semplicità con i parametri di default o essere completamente personalizzato:

Configurazione di base

$(function() {
    $('#foo').bubbles();
});


Farà partire le bolle dall'angolo in alto a sinistra dell'elemento con id foo

Scegliere l'immagine della bolla


Il plugin di default caricherà l'immagine bubble.png presente nella stessa cartella del file html, per impostare un nome e un percorso differenti usate il codice:

$(function() {
    $('#foo').bubbles({'image' : 'myPath/myImage.png'});
});



il percorso è sempre relativo al file html che contiene le bolle


Altri parametri


questo è l'elenco dei parametri utilizzabili per la personalizzazione (seguiti dai loro valori di default):

'image' : 'myPath/myImage.png'      percorso e nome file dell'immagine, vedi sopra
'firstX' : 0,       x della coordinata da cui partono le bolle, rispetto all'oggetto contenitore
'firstY' : 0,        y della coordinata da cui partono le bolle, rispetto all'oggetto contenitore
'minHeight' : 10,    dimensione minima della bolla (regolata secondo l'altezza)
'maxHeight' : 90,   dimensione massima della bolla (regolata secondo l'altezza)
'minX' : 200 ,   minima coordinata x della posiziona finale delle bolle
'minY' :  0,  minima coordinata y della posiziona finale delle bolle
'maxX' : 300, massima coordinata x della posiziona finale delle bolle
'maxY' :  -200, massima coordinata y della posiziona finale delle bolle
'minDuration' : 500 , durata minima dell'animazione in millisecondi
'maxDuration' :  5000, durata massima dell'animazione in millisecondi
'interval' : 50 ogni quanti millisecondi viene lanciata una nuova bolla

2 commenti:

  1. ciao, esiste un modo per stoppare la creazione di bolle?
    mi spiego meglio: vorrei sapere se esiste una variabile (o un qualsiasi altro modo) per fermare la generazione di bolle o dopo un tot di bolle o con un comando (io vorrei farlo con mouseover e mouseout).
    grazie in anticipo per l'aiuto

    RispondiElimina
    Risposte
    1. ciao per il momento non c'è ancora ma lo considero per la prossima versione

      Elimina