神马文学网转 scriptaculous的Effect效果对象 - 疯猫 - CSDNBlog
来源：百度文库 编辑：神马文学网 时间：2024/05/01 21:01:25
2007年01月06日 星期六 09:02
Effect效果对象
下拉效果&上拉效果
aaaaaaa
bbbbbbbbbbbbbbbbb
ccccccccccccc
Effect.BlindDown('d1',{})函数的花括号里面{}可以跟参数：
duration:1.0; 这个数字表示动作持续时间。
delay: 0.5 延迟0.5秒再启动效果
如果想让一个Div开始的时候隐藏，点击下拉的时候才拉下，那么只需要将此Div的属性设为：display: none
上滚&下滚效果
这一组函数:
Effect.SlideUp('d1',{});
Effect.SlideDown('d1',{});
这组函数效果与Blind那一组基本一样，效果粗看起来差不多……我也是细心比较才发现的。原来Blind这一对内容是不会随着上拉或下拉而动的。而Slide中的内容会被拉上或拉下。
变色闪动效果
Effect.Highlight('d1',{duration:1.5})
此元素将会改变几次颜色并最终返回原来的颜色。
渐变显示效果
Effect.Appear(‘d1’,{})
原来的元素初始CSS为display:none,用此效果后渐渐显示，渐变的alpha滤镜效果。
膨胀消失效果
Effect.Puff(‘d1’,{})
消失后可以使用Element.show('d1') 再次将元素显示出来。
渐渐消失效果
Effect.Fade('d1')
渐渐显示效果
Effect.Appear('test_img')
震动效果
Effect.Shake(‘d1’,{})
此元素将会左右震动
闪烁效果
Effect.Pulsate('d1',{})
此函数通过alpha滤镜来进行闪烁。
长大效果
Effect.Grow("d1",
{duration:5.0, direction: 'bottom-right', opacityTransition: Effect.Transitions.linear});
其中:direction 是指的元素从什么方向进入。
如果不指定后面的参数，元素缺省是从下面的中间开始变大。没有alpha效果。
萎缩效果
Effect.Shrink(“d1”,{})
长大效果Grow()的相反效果。
Toggle各种效果
汉语里面不知道怎么翻译Toggle，大体意思是：当某物打开的时候触发就关闭，而关闭的时候触发就打开 的一种像”乒乓开关”的行为。这种行为在做页面时特别有用。
Effect.toggle('d2','BLIND')
Effect.toggle('d2',’appear’)
Effect.toggle('d2',’slide’)
…
似乎所有这种有着相反效果的函数都可以在这里设置Toggle, ’BLIND’中的效果名大小写不敏感。
取消效果函数
这几个函数真是乏善可陈……唯一要提的就是关于中止这几个动画过程的函数：cancel()
例如：
effect1=new Effect.SlideUp(‘d1’,{duration:10.0});
想要在这10秒钟中止动画过程： effect1.cancel()
效果队列
这个神秘的queue属性，还有待进一步学习……
function startTimeline() {
// 3x highlight in front
for(var i=0; i<3; i++)
new Effect.Highlight('d3', { duration: 1.0, queue: 'front' });
// insert scale at very beginning
new Effect.Scale('d1', 75, { scaleContent: true, duration: 1.0, queue: 'front' });
// parallel implied, delay 0.5 sec
new Effect.Highlight('d1', { delay: 0.5 });
// puff at end
new Effect.Puff('d2', { duration: 4.0, queue: 'end' });
}
Trackback: http://tb.blog.csdn.net/TrackBack.aspx?PostId=1568048