效果的通用参数
可以为所有核心效果设置以下通用选项 −
| Sr.No | 选项和说明 |
|---|---|
| 1 |
duration 效果的持续时间(以秒为单位)，以浮点数给出。默认为 1.0。 |
| 2 |
fps 以每秒这么多帧为目标。默认为 25。不能高于 100。 |
| 3 |
transition 设置修改动画当前点的函数，该点介于 0 和 1 之间。提供以下转换 −
|
| 4 |
from 设置过渡的起点，一个介于 0.0 和 1.0 之间的浮点数。默认为 0.0。 |
| 5 | to 设置过渡的终点，一个介于 0.0 和 1.0 之间的浮点数。默认为 1.0。 |
| 6 |
sync 设置效果是否应自动渲染新帧(默认情况下会渲染)。如果为 true，您可以通过调用效果的 render() 实例方法手动渲染帧。这是由 Effect.Parallel() 使用的。 。 |
| 7 | queue 设置排队选项。与字符串一起使用时，它可以是 front 或 end，以将效果排在全局效果队列的开头或结尾，也可以是队列参数对象，该对象可以具有 {position:front/end, scope: scope, limit:1}。 |
| 8 |
delay 设置效果实际开始前要等待的秒数。默认为 0.0。 |
| 9 |
direction 设置过渡的方向。值可以是"左上"、"右上"、"左下"、"右下"或"中心"(默认)。仅适用于增大和缩小效果。 |
以下是应用上述一个或多个参数的示例。所有参数都放在 {} 中，并用逗号 (,) 分隔。
<html>
<head>
<title>script.aculo.us examples</title>
<script type = "text/javascript" src = "/javascript/prototype.js"></script>
<script type = "text/javascript" src = "/javascript/scriptaculous.js?load = effects" ></script>
</head>
<body>
<p>Try by giving different parameters</p>
<div onclick = "new Effect.Opacity(this,
{
duration: 2.0,
transition: Effect.Transitions.linear,
from: 1.0,
to: 0.5
});" >
Click here to see the result:
</div>
</body>
</html>
这将产生以下结果 −
回调方法
您可以在效果运行时将上述任何参数应用于各种事件中的任何元素。这可以通过在 JavaScript 中为该元素编写回调方法来实现。
要使用回调方法，您还需要以下列出的四个参数 −
| Sr.No | 回调 &描述 |
|---|---|
| 1 | beforeStart 在启动主要效果渲染循环之前调用。 |
| 2 | beforeUpdate 在效果渲染循环的每次迭代中调用，在重绘发生之前。 |
| 3 | afterUpdate 在效果渲染循环的每次迭代中调用，在重绘发生之后。 |
| 4 |
afterFinish 之后调用最后一次重绘效果已完成。 |
在效果对象中，您可以访问几个有用的变量并在回调函数中使用它们:
| Sr.No | 变量 &描述 |
|---|---|
| 1 | effect.element 应用效果的元素。 |
| 2 |
effect.options 保存您为效果提供的选项。 |
| 3 |
effect.currentFrame 最后渲染的帧的编号。 |
| 4 | effect.startOn 效果启动的时间(以毫秒为单位)已开始。 |
| 5 | effect.finishOn 启动效果后，效果完成的时间(以毫秒为单位)。 |
| 6 | effect.effects[] 在 Effect.Parallel 效果上，有一个 effects[] 数组，其中包含并行效果所组成的单个效果。 |
示例
以下示例显示如何使用回调
<html>
<head>
<title>script.aculo.us examples</title>
<script type = "text/javascript" src = "/javascript/prototype.js"></script>
<script type = "text/javascript" src = "/javascript/scriptaculous.js?load = effects"></script>
<script type = "text/javascript">
function OnFinish(obj){
alert("Finishing - I'm element :" + obj.element.id);
}
function OnStart(obj){
alert("Starting - I'm element :" + obj.element.id);
}
function myEffect(myObject){
new Effect.Highlight(myObject,
{
startcolor:'#ffffff',
endcolor:'#ffffcc',
duration: 0.5,
afterFinish: OnFinish,
beforeStart: OnStart
}
);
}
</script>
</head>
<body>
<p>Click following line to see the result:</p>
<div onclick = "myEffect(this)" id = "bestdiv">
Click me to see the result!
</div>
</body>
</html>
这将产生以下结果 −
注意 − 此处 startcolor 和 endcolor 是效果特定参数。我们将在 Effect.Highlight 中讨论这些参数。
scriptaculous_effects.html
