script.aculo.us - Effetti visivi

Gli effetti script.aculo.us sono divisi in due gruppi:

Effetti principali

I seguenti sei effetti principali costituiscono la base della libreria JavaScript di script.aculo.us Visual Effects.

  • Effect.Opacity

  • Effect.Scale

  • Effect.Morph

  • Effect.Move

  • Effect.Highlight

  • Effect.Parallel

Tutti gli effetti principali supportano vari parametri comuni e parametri specifici degli effetti e questi nomi di effetti fanno distinzione tra maiuscole e minuscole.

Tutti i parametri comuni specifici degli effetti sono stati discussi in questo tutorial insieme agli effetti.

Effetti di combinazione

Tutti gli effetti di combinazione si basano sui cinque effetti principali e sono pensati come esempi per consentire di scrivere i propri effetti.

Di solito questi effetti si basano sull'esecuzione parallela e sincronizzata di altri effetti. Tale esecuzione è prontamente disponibile, quindi creare i propri effetti combinati è molto semplice. Ecco un elenco di effetti di combinazione:

  • Effect.Appear

  • Effect.Fade

  • Effect.Puff

  • Effect.DropOut

  • Effect.Shake

  • Effect.SwitchOff

  • Effect.BlindDown

  • Effect.BlindUp

  • Effect.SlideDown

  • Effect.SlideUp

  • Effect.Pulsate

  • Effect.Squish

  • Effect.Fold

  • Effect.Grow

  • Effect.Shrink

Inoltre, c'è il file Effect.toggle metodo di utilità per gli elementi che si desidera mostrare temporaneamente con un'animazione Appear / Fade, Slide o Blind.

  • Effect.toggle

File di libreria richiesti per gli effetti

Per utilizzare le funzionalità degli effetti di script.aculo.us, dovrai caricare il modulo degli effetti. Quindi, il caricamento minimo per script.aculo.us sarà simile a questo:

<html>
   <head>
      <title>script.aculo.us effects</title>
      <script type = "text/javascript"  src = "/javascript/prototype.js"></script>
      <script type = "text/javascript"  src = "/javascript/"effects.j"></script>
   </head>
	
   <body>
      ...
   </body>
</html>

Richiama funzioni effetto

Il modo corretto per avviare un effetto principale è solitamente con il newoperatore. A seconda delle tue preferenze, puoi utilizzare una delle due sintassi:

Sintassi

new Effect.EffectName(element [, requiredArgs ] [ , options ] )
OR
element.visualEffect('EffectName' [, requiredArgs ] [,options])

Queste due sintassi sono tecnicamente equivalenti. La scelta tra i due dipende principalmente dal tuo personale senso dell'estetica del codice.

Esempio

Ecco due chiamate equivalenti, così puoi vedere come sono correlate le sintassi, che sono molto intercambiabili -

new Effect.Scale('title', 200, { scaleY: false, scaleContent: false });
OR
$('title' ).visualEffect('Scale', 200, { scaleY:false, scaleContent:false });