1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
|
<!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>
|
