转 scriptaculous的Effect效果对象

左手的ㄟ右手 2021-09-10 04:12 231阅读 0赞

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

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