利用Scriptaculous创建动画效果
为了使用Scriptaculous库需要引用如下：
<script src="scriptaculous-js-1.9.0/scriptaculous-js-1.9.0/lib/prototype.js" type="text/javascript"></script>
<script src="scriptaculous-js-1.9.0/scriptaculous-js-1.9.0/src/scriptaculous.js" type="text/javascript"></script>
接下来创建四个div
<div class="container"> <div class="demo" id="demo-effect-shake" onclick="new Effect.Shake(this)"> 横向抖动 </div> </div> <div class="container"> <div class="demo" id="demo-effect-shrink" onclick="new Effect.Shrink(this); window.setTimeout('Effect.Appear(\'demo-effect-shrink\', {duration:.3})',2500);"> 动态逐渐缩小 </div> </div> <div class="clear"></div> <div class="container"> <div class="demo" id="demo-effect-fade" onclick="new Effect.Fade(this); window.setTimeout('Effect.Appear(\'demo-effect-fade\', {duration:.3})',2500);"> Effect.Fade </div> </div> <div class="container"> <div class="demo" id="demo-effect-puff" onclick="new Effect.Puff(this); window.setTimeout('Effect.Appear(\'demo-effect-puff\', {duration:.3})',2500);"> Effect.Puff </div> </div>
ok了~~~
其中这几条代码：
onclick="new Effect.Puff(this); window.setTimeout('Effect.Appear(\'demo-effect-puff\', {duration:.3})',2500);" onclick="new Effect.Fade(this); window.setTimeout('Effect.Appear(\'demo-effect-fade\', {duration:.3})',2500);" onclick="new Effect.Shrink(this); window.setTimeout('Effect.Appear(\'demo-effect-shrink\', {duration:.3})',2500);"
onclick 是对应点击的效果图，后面widow.setTimeout()是重新显示效果。2500=2.5秒后（点击后）执行Effect.Appear（）函数-----最好是大一秒我试过了小于990就不显示了（如果太小可能是effect。puff（）等函数后执行了）
duration：.3表示3秒内重新显示。
其他效果函数如下表：
| 函数名 | 解释 | 举例 |
| Element.toggle | 交替隐藏或显示 | Element.toggle(''div1'',''div2'') |
| Element.hide | 隐藏 | Element.hide(''div1'',''div2'') |
| Element.show | 显示 | Element.show(''div1'',''div2'') |
| Element.remove | 删除 | Element.remove(''div1'',''div2'') |
| Element.getHeight | 取得高度 | Element.getHeight(''div1'') |
| Toggle.display | 和Element.toggle相同 | Toggle.display(''div1'',''div2'') |
| Insertion.Before | 在DIV前插入文字 | Insertion.Before(''div1'',''my content'') |
| Insertion.After | 在DIV后插入文字 | Insertion.After(''div1'',''my content'') |
| Insertion.Top | 在DIV里最前插入文字 | Insertion.Top(''div1'',''this is a text'') |
| Insertion.Bottom | 在DIV里最后插入文字 | Insertion.Bottom(''div1'',''this is a text'') |
| PeriodicalExecuter | 以给定频率调用一段JavaScript | PeridicalExecutor(test, 1)"这里test是Javascript的函数,1是频率(1秒). |
| $ | 取得一个DIV, 相当于getElementById() | $(''div1'') |
| Field.clear | 清空一个输入框 | Field.clear(''textfield1'') |
| Field.focus | 把 焦点集中在输入框上 | Field.focus(''select1'') |
| Field.present | 判断内容是否为空 | alert(Field.present(''textfield1''))" |
| Field.select | 选择输入框的内容 | Field.select(''textfield1'')" |
| Field.activate | 把 焦点集中在输入框上并选择输入框的内容 | Field.activate(''textfield1'')" |
| Form.serialize | 把表格内容转化成string | |
| Form.getElements | 取得表格内容为数组形式 | |
| Form.disable | disable表格所有内容 | Form.disable(''form1'') (这个好象不work) |
| Form.focusFirstElement | 把焦点集中在表格第一个元素上 | Form.focusFirstElement(''form1'') |
| Form.reset | Reset表格 | Form.reset(''form1'') |
| Form.Element.getValue | 取得表格输入框的值 | Form.Element.getValue(''text1'') |
| Form.Element.serialize | 把表格中输入框内容转化成string | Form.Element.serialize(''text1'') |
| $F | 等同于Form.Element.getValue() | $F(''text1'') |
| Effect.Highlight | 高亮特效. | Effect.Highlight(''text1'') |
| Effect.Fade | 褪色特效 | |
| Effect.Scale | 放大缩小(百分比） |
Effect.Scale(''text1'', 200) 这里200 = 200%, 即两倍 |
| Effect.Squish | 消失特效．文字缩小后消失 | Effect.Squish(''text1'') |
| Effect.Puff | 消失特效．文字放大后消失 | Effect.Puff(''text1'') |
| Effect.Appear | 出现特效 | |
| Effect.ContentZoom | ZOOM特效． | |
| Ajax.Request | 传送Ajax请求给服务器 | Ajax.Request(''http://server/s.php'') |
| Ajax.Updater | 传送Ajax请求给服务器并用答复的结果更新指定的Container | Ajax.Updater(''text1'',''http://server/s.php'') |
