在本文中,我们将通过使用名为script.aculo.us的JavaScript库(具有从一个到另一个的平滑过渡)的JavaScript库来演示SwitchOff选项的视觉效果。我们也可以调整效果的持续时间。
用法:
Effect.SwitchOff('id_of_element');
注意:要使用此库,我们应该下载该库,然后在程序中使用它。为此,您可以点击此链接http://script.aculo.us/downloads。
演示:为了演示此函数的使用,我们编写了一小段代码。我们编写了一个小的JavaScript函数ShowEffect()方法,该方法使用了此库的SwitchOff()方法。通过单击“单击我关闭线路!”,您将清楚地看到效果。
例:若要查看效果,请首先在代码中包含库文件,然后在本地环境中打开此程序。
HTML
<html>
<head>
<script type="text/javascript"
src="prototype.js">
</script>
<script type="text/javascript"
src="scriptaculous.js?load = effects">
</script>
<script type="text/javascript">
function ShowEffect(element) {
new Effect.SwitchOff(element,
{ duration:3.0 });
}
function displayImage(element) {
new Effect.Appear(element,
{ duration:1, from:1.1, to:1.2 });
}
</script>
</head>
<body>
<div onclick="displayImage('hideshow')">
Click me to display the image!
</div>
<br />
<div id="hideshow" onclick="ShowEffect(this);">
<img src="GEEKSIMAGES/geeks1.PNG" alt="" /><br />
Click me to switch me off.
</div>
</body>
</html>
输出:
相关用法
注:本文由纯净天空筛选整理自Jitender_1998大神的英文原创作品 script.aculo.us SwitchOff Effect。非经特殊声明,原始代码版权归原作者所有,本译文未经允许或授权,请勿转载或复制。