scriptaculous--Effect

最新推荐文章于 2025-12-05 08:37:05 发布

原创最新推荐文章于 2025-12-05 08:37:05 发布 · 476 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#div #javascript #callback

本文介绍了一个使用JavaScript实现的页面元素不透明度变化效果，并通过多种特效如Fade、Appear等展示了如何操控DOM元素的显示与隐藏状态。此外还提供了一系列交互式动画效果的实例。

<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"></mce:script> </head> <body> <div id="div1" style="color:red" mce_style="color:red" onclick="clickMe(this);"> Hello World! </div> <br> <a href="#" mce_href="#" onclick="Effect.Fade('div2');">Fade</a> <a href="#" mce_href="#" onclick="Effect.Appear('div2');">Appear</a> <a href="#" mce_href="#" onclick="Effect.BlindDown('div2');">BlindDown</a> <a href="#" mce_href="#" onclick="Effect.BlindUp('div2');">BlindUp</a> <br><a href="#" mce_href="#" onclick="Effect.DropOut('div2');">DropOut</a> <a href="#" mce_href="#" onclick="Effect.Fold('div2');">Fold</a> <a href="#" mce_href="#" onclick="Effect.Grow('div2',{direction:'center',duration:2.0});">Grow</a> <a href="#" mce_href="#" onclick="Effect.Puff('div2',{duration:3.0,from:0,to:1});">Puff</a> <a href="#" mce_href="#" onclick="Effect.Pulsate('div2');">Pulsate</a> <a href="#" mce_href="#" onclick="Effect.Shake('div2');">Shake</a> <a href="#" mce_href="#" onclick="Effect.Shrink('div2');">Shrink</a> <br><a href="#" mce_href="#" onclick="Effect.SlideDown('div2');">SlideDown</a> <a href="#" mce_href="#" onclick="Effect.SlideUp('div2');">SlideUp</a> <a href="#" mce_href="#" onclick="Effect.SwitchOff('div2');">SwitchOff</a> <a href="#" mce_href="#" onclick="Effect.Squish('div2');">Squish</a> <a href="#" mce_href="#" onclick="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>