Entwicklung »Javascript» Internet

Scriptaculous Effect.Tween: So funktioniert es

Donnerstag, 20. März 2008

Von allen Bibliotheken "Web 2.0" zur Verfügung, scriptaculous ist sicherlich die schlecht dokumentiert! Auf der offiziellen Website, die oft langsam, die Dokumentation ist unvollständig, schlecht gemacht und schwer zu handhaben. Mit den neuesten Versionen sind nun einige neue Features ganz fehlen, ebenso wie die neue Core-Effekt Tween (Effect.Tween). Die letztere, ähnlich dem Tween in Flash ermöglicht es Ihnen, Übergänge zu manipulieren. ÜBERSICHT ihrer Basis ist die folgende:

PLAIN TEXT
JavaScript:
  1. object , from , to ) ; Effect. Tween (Objekt, von, bis);

Dieser neue Effekt lässt sich damit ein zwischen execute (Übergang) zwischen zwei Werten, Methoden aufrufen oder stellen Sie die Eigenschaften eines Objekts (einschließlich der Elemente des HTML DOM). Es unterstützt auch Callback-Funktionen, die den Kontext des Objekts, auf dem Sie den Übergang ausführen müssen.

Mal sehen, einige Beispiele:

a) Führt eine Eigenschaft Tween mp Objekt mo

PLAIN TEXT
JavaScript:
  1. { mp : 0 } var mo = (MP: 0)
  2. / /
  3. ( mo , 30 , 80 , 'mp' ) ; New Effect. Tween (Mo, 30, 80, 'mp');

b) Führen Sie einen Tween foo auf das Element 'DOM HTML

PLAIN TEXT
HTML:
  1. "foo" >< / div> <div id = "foo"> </ div>

PLAIN TEXT
JavaScript:
  1. 'foo' ', 0, 100, ' innerHTML '); EffectTween neue ( 'foo' ', 0, 100,' innerHTML ');

c) Stellen Sie die Standard-Parameter von scriptaculous unterstützt:

PLAIN TEXT
JavaScript:
  1. ( 'foo' , 10 , 100 , { duration : 10 } , 'innerHTML' ) ; New Effect. Tween ( 'foo', 10, 100, (Dauer: 10), "innerHTML ');

d) Verwendung von Callback-Funktionen:

PLAIN TEXT
JavaScript:
  1. ( 'foo' , 10 , 100 , { duration : 10.0 } , function ( p ) { New Effect. Tween ( 'foo', 10, 100, (Dauer: 10,0), Funktion (p) (
  2. = 'Countdown: ' + p dies. innerHTML = 'Countdown:' + p
  3. )
  4. )

e) Art des Übergangs:

PLAIN TEXT
JavaScript:
  1. ( 'foo' , 10 , 100 , { duration : 10 , transition : Effect. Transitions . sinoidal } , 'innerHTML' ) ; New Effect. Tween ( 'foo', 10, 100, (Dauer: 10, transition: Effect. Transitions. Sinoidal), 'innerHTML');

f) Das Niveau der Veranstaltungen:

PLAIN TEXT
JavaScript:
  1. ( 'foo' , 10 , 100 , { duration : 2 , afterFinish : function ( ) { alert ( "Game Over" ) ; } } , function ( p ) { this . innerHTML = 'Countdown: ' + p } ) ; New Effect. Tween ( 'foo', 10, 100, (Dauer: 2, afterFinish: function () (alert ( "Game Over ");)), Funktion (p) (this. innerHTML = 'Countdown:' + p ));

Um zu testen, diesen Beispielen können Sie die folgenden kompletten Code verwenden:

PLAIN TEXT
HTML:
  1. DOCTYPE html PUBLIC "- / / W3C / / DTD XHTML 1.0 Transitional / / EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. > <html "http://www.w3.org/1999/xhtml" xmlns =>
  4. "Content-Type" content = "text/html; charset=utf-8" / > <meta http-equiv = "Content-Type" content = "text/html; charset=utf-8" />
  5. <title> Untitled Document </ title>
  6. "text/javascript" src = "js/prototype.js" >< / script> <script "text/javascript" type = src = "js/prototype.js"> </ script>
  7. "text/javascript" src = "js/scriptaculous.js?load=effects" >< / script> <script "text/javascript" type = src = "js/scriptaculous.js?load=effects"> </ script>
  8. "text/javascript" > <script type = "text/javascript">
  9. / /
  10. Event.observe (window, 'load', main);
  11. / /
  12. Funktion main () (
  13. Effect.Tween neue ( 'foo', 10, 100, (Dauer: 2, afterFinish: function () (alert ( "Game Over ");)), Funktion (p) = (this.innerHTML 'Countdown:' + p ));
  14. )
  19. "foo" >< / div> <div id = "foo"> </ div>

Verwandte Post

War dieser Artikel hilfreich?: Per nientePocoAbbastanzaMoltoMoltissimo
Loading ... Loading ...

Tags:

Es gibt keine Kommentare für diesen Beitrag

Leave a comment

TAG XHTML Berechtigungen: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> INSERTION CODE: 
 <pre></pre>         // blocco generico [code][/code]       // blocco generico [as][/as]           // Actionscript [css][/css]         // CSS Style Sheet [html][/html]       // HTML [js][/js]           // Javascript [objc][/objc]       // Objective-C [php][/php]         // PHP [sql][/sql]         // SQL