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 });