<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Effects demo page</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript" src="../../base.js"></script> <script type="text/javascript" src="../../dom.js"></script> <script type="text/javascript" src="../../effects.js"></script> </head> <body style="font: 0.9em Arial;background: #f5f5f5;"> <h1>Effect.Fade()</h1> <p>Call with <code>new Effect.Fade(element)</code></p> <p>Example: <code>onclick="new Effect.Fade(this)"</code></p> <div id="fade" onclick="new Effect.Fade(this)" style="border:1px solid red; padding:1em;"> Click here or the image to start effect </div> <h1>Effect.Highlight()</h1> <p>Call with <code>new Effect.Highlight(element)</code></p> <p>Example: <code>onclick="new Effect.Highlight(this)"</code></p> <div id="fade" onclick="new Effect.Highlight(this)" style="border:1px solid red; padding:1em;"> Click here or the image to start effect </div> <h1>Effect.Appear()</h1> <p>Call with <code>new Effect.Appear(element)</code></p> <p>Example: <code>onclick="new Effect.Appear('appear')"</code></p> <a href="#" onclick="new Effect.Appear('appear')">Start effect</a> <div id="appear" style="border:1px solid red; padding:1em;display:none;background:#fff;"> This is just some text </div> <h1>Effect.Scale()</h1> <p>Call with <code>new Effect.Scale(element, percent)</code></p> <p>Note: if you scale a div, all contained elements must have width or height set with <tt>em</tt>. If you scale an image, width and height are not required to be set. Also, Effect.Scale is aware of other scaling effects done on the target element, and will act accordingly. The <tt>percent</tt> parameter is always relative of the original size of the element.</p> <p>Example: <code>onmouseover="new Effect.Scale('scale',150)" onmouseout="new Effect.Scale('scale',100)"</code></p> <div style="height:100px"> <img src="fungii_logo.gif" style="width:130px;" onmouseover="new Effect.Scale(this,150)" onmouseout="new Effect.Scale(this,100)"/> <img src="fungii_logo.gif" style="width:130px;" onmouseover="new Effect.Scale(this,150)" onmouseout="new Effect.Scale(this,100)"/> <img src="fungii_logo.gif" style="width:130px;" onmouseover="new Effect.Scale(this,150)" onmouseout="new Effect.Scale(this,100)"/> <img src="fungii_logo.gif" style="width:130px;" onmouseover="new Effect.Scale(this,150)" onmouseout="new Effect.Scale(this,100)"/> </div> <h1>Effect.Squish()</h1> <p>Call with <code>new Effect.Squish(element)</code></p> <div id="squish" style="border:1px solid red; width:250px; height:150px;background:#fff;" onclick="new Effect.Squish(this)"> Click me to squish.<br/> <img src="fungii_logo.gif" style="width:100%;" /> </div> <h1>Effect.Puff()</h1> <p>Call with <code>new Effect.Puff(element)</code></p> <p>Works with absolute and relative positioned elements. In this example, divs with <tt>float:left</tt> are used.</p> <div id="puff1" style="float:left;margin-right:1em;border:1px solid red; padding:1em;width:10em;height:5em;background:#fff;" onclick="new Effect.Puff(this)"> (floating) Click me to puff.<br/> <img src="fungii_logo.gif" style="width:8em" /> </div> <div id="puff2" style="float:left;margin-right:1em;border:1px solid red; padding:1em;width:10em;height:5em;background:#f8f;" onclick="new Effect.Puff(this)"> (floating) Click me to puff.<br/> <img src="fungii_logo.gif" style="width:8em" /> </div> <div id="puff3" style="float:left;margin-right:1em;border:1px solid red; padding:1em;width:10em;height:5em;background:#ff8;" onclick="new Effect.Puff(this)"> (floating) Click me to puff.<br/> <img src="fungii_logo.gif" style="width:8em" /> </div> <div id="puff4" style="float:left;margin-right:1em;border:1px solid red; padding:1em;width:10em;height:5em;background:#fff;" onclick="new Effect.Puff(this)"> (floating) Click me to puff.<br/> <img src="fungii_logo.gif" style="width:8em" /> </div> <div id="puff5" style="float:left;margin-right:1em;border:1px solid red; padding:1em;width:10em;height:5em;background:#f8f;" onclick="new Effect.Puff(this)"> (floating) Click me to puff.<br/> <img src="fungii_logo.gif" style="width:8em" /> </div> <div id="puff6" style="float:left;margin-right:1em;border:1px solid red; padding:1em;width:10em;height:5em;background:#ff8;" onclick="new Effect.Puff(this)"> (floating) Click me to puff.<br/> <img src="fungii_logo.gif" style="width:8em" /> </div> <div id="puff11" style="float:left;margin-right:1em;border:1px solid red; padding:1em;width:10em;height:5em;background:#fff;" onclick="new Effect.Puff(this)"> (floating) Click me to puff.<br/> <img src="fungii_logo.gif" style="width:8em" /> </div> <div id="puff12" style="float:left;margin-right:1em;border:1px solid red; padding:1em;width:10em;height:5em;background:#f8f;" onclick="new Effect.Puff(this)"> (floating) Click me to puff.<br/> <img src="fungii_logo.gif" style="width:8em" /> </div> <div id="puff13" style="float:left;margin-right:1em;border:1px solid red; padding:1em;width:10em;height:5em;background:#ff8;" onclick="new Effect.Puff(this)"> (floating) Click me to puff.<br/> <img src="fungii_logo.gif" style="width:8em" /> </div> <div id="puff14" style="float:left;margin-right:1em;border:1px solid red; padding:1em;width:10em;height:5em;background:#fff;" onclick="new Effect.Puff(this)"> (floating) Click me to puff.<br/> <img src="fungii_logo.gif" style="width:8em" /> </div> <div id="puff15" style="float:left;margin-right:1em;border:1px solid red; padding:1em;width:10em;height:5em;background:#f8f;" onclick="new Effect.Puff(this)"> (floating) Click me to puff.<br/> <img src="fungii_logo.gif" style="width:8em" /> </div> <div id="puff16" style="float:left;margin-right:1em;border:1px solid red; padding:1em;width:10em;height:5em;background:#ff8;" onclick="new Effect.Puff(this)"> (floating) Click me to puff.<br/> <img src="fungii_logo.gif" style="width:8em" /> </div> </body> </html>