Script.Aculo.us
Script.Aculo.us
1. 简介：
官方主页：http://script.aculo.us/
官方WIKI：http://wiki.script.aculo.us/scriptaculous/show/Usage* *
Scriptaculous是基于prototype.js框架的JS效果。
下载&安装：
Scriptaculous包含了6个.js,scriptaculous.js是主文件.
把这6个文件放于同一个目录下，引入scriptaculous.js，会默认把其他5个都都引入了(原理见本文最后)
<head>中引入如下：
<script src="javascripts/prototype.js" type="text/javascript"></script> <script src="javascripts/scriptaculous.js" type="text/javascript"></script>
默认方式下，。如果只需要引入其中一部分，可以通过以下方式：
<script src="scriptaculous.js?load=effects,dragdrop" type="text/javascript"></script>
2.Effective
Effective 是 scriptaculous 最主要的功能之一, 可以直接以html 的 element_id为参数调用API, 比如：
<script type="text/javascript" language="javascript"> Effect.Appear('element_id'); </script>
也可以通过事件机制 :
<div onclick="new Effect.SwitchOff(this)"> Click here if you've seen enough. </div>
---- 层的开关效果
<div onclick="new Effect.BlindUp(this, {duration: 16})"> Click here if you want this to go slooooow. </div>
---- 帘幕上拉效果
通过 duration（持续事件）,fps（每秒帧数）,delay（岩石）之类的参数，可以实现更多效果。
更多Demo查看scriptaculous wiki上的Demos
3. 原理
scriptaculous.js引入其他js 代码如下：
var Scriptaculous = { Version: '1.6', require: function(libraryName) { // inserting via DOM fails in Safari 2.0, so brute force approach document.write('<script type="text/javascript" src="' + libraryName + '"></script>'); }, load: function() { if ((typeof Prototype == 'undefined') || (typeof Element == 'undefined') || (typeof Element.Methods == 'undefined') || parseFloat(Prototype.Version.split(".")[0] + "." + Prototype.Version.split(".")[1]) < 1.5) throw("script.aculo.us requires the Prototype JavaScript framework >= 1.5.0"); $A(document.getElementsByTagName("script")).findAll(function(s) { return (s.src && s.src.match(/scriptaculous\.js(\?.*)?$/)) }).each(function(s) { var path = s.src.replace(/scriptaculous\.js(\?.*)?$/, ''); var includes = s.src.match(/\?.*load=([a-z,]*)/); (includes ? includes[1] : 'builder,effects,dragdrop,controls,slider').split(',').each( function(include) { Scriptaculous.require(path + include + '.js') }); }); } }Scriptaculous.load();