<html> <head> <title></title> <mce:script language="javascript" type="text/javascript" src="js/prototype.js" mce_src="js/prototype.js"></mce:script> <mce:script language="javascript" type="text/javascript" src="js/scriptaculous.js?load=effects" mce_src="js/scriptaculous.js?load=effects"></mce:script> <mce:script language="javascript" type="text/javascript"><!-- /** Opacity 进行不透明处理。 选项 duration 持续时间 from 开始不透明度 为1表示不透明 为0表示全透明 to 结束不透明度 afterFinish 回调方法 当该特效完成后要执行的方法。 */ function clickMe(obj){ new Effect.Opacity(obj.id, {duration:1,from:1,to:0,afterFinish:callback}); } /** 回调方法。传过来的参数是effect对象 所有的回调方法 beforeStart beforeUpdate afterUpdate afterFinish effect对象属性 effect.element effect.options effect.currentFrame effect.startOn effect.finishOn effect.effects[] */ function callback(e){ var obj = e.element; var es = [Effect.Appear(obj.id), new Effect.Highlight(obj,{ duration:2.0,startcolor:'#ffff00',endcolor:'ffffff'})]; new Effect.Parallel(es,{duration:0.5}); } // --></mce:script> </head> <body> <div id="div1" style="color:red" mce_style="color:red" οnclick="clickMe(this);"> Hello World! </div> <br> <a href="#" mce_href="#" οnclick="Effect.Fade('div2');">Fade</a> <a href="#" mce_href="#" οnclick="Effect.Appear('div2');">Appear</a> <a href="#" mce_href="#" οnclick="Effect.BlindDown('div2');">BlindDown</a> <a href="#" mce_href="#" οnclick="Effect.BlindUp('div2');">BlindUp</a> <br><a href="#" mce_href="#" οnclick="Effect.DropOut('div2');">DropOut</a> <a href="#" mce_href="#" οnclick="Effect.Fold('div2');">Fold</a> <a href="#" mce_href="#" οnclick="Effect.Grow('div2',{direction:'center',duration:2.0});">Grow</a> <a href="#" mce_href="#" οnclick="Effect.Puff('div2',{duration:3.0,from:0,to:1});">Puff</a> <a href="#" mce_href="#" οnclick="Effect.Pulsate('div2');">Pulsate</a> <a href="#" mce_href="#" οnclick="Effect.Shake('div2');">Shake</a> <a href="#" mce_href="#" οnclick="Effect.Shrink('div2');">Shrink</a> <br><a href="#" mce_href="#" οnclick="Effect.SlideDown('div2');">SlideDown</a> <a href="#" mce_href="#" οnclick="Effect.SlideUp('div2');">SlideUp</a> <a href="#" mce_href="#" οnclick="Effect.SwitchOff('div2');">SwitchOff</a> <a href="#" mce_href="#" οnclick="Effect.Squish('div2');">Squish</a> <a href="#" mce_href="#" οnclick="Effect.toggle('div2');">toggle</a> <center> <div id='div2' style='width:50%'> <h1>div2</h1><br> Test Scale1<br> Test Scale2<br> Test Scale3<br> Test Scale4<br> Test Scale5<br> </div> </center> </body> </html>