Scriptaculous-优快云博客

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 οnclick="new Effect.SwitchOff(this)">
    Click here if you've seen enough.
  </div>

---- 层的开关效果

<div οnclick="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();