转 scriptaculous的Effect效果对象

2007年01月06日 星期六 09:02

Effect效果对象 下拉效果&上拉效果   <div id="d1">  aaaaaaa<p>bbbbbbbbbbbbbbbbb<p>ccccccccccccc<p> </div>  <a href="#" οnclick="Effect.BlindDown('d1',{});; return false;">BlindDown()</a> <p>   <a href="#" οnclick="Effect.BlindUp('d1',{});; return false;">BlindUp()</a> 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' });   }