Web前端: 基于Scriptaculous的菜单滑动切换效果

2013年2月3日星期日

下面这个教程将告诉你如何使用Scriptaculous框架来达到一个简单的菜单滑动切换效果。(原文:woork /翻译:帕兰).

toggle effect 1 基于Scriptaculous的菜单滑动切换效果

首先，你应该在你的网页代码里面调用准备好需要的js文件，放在<head>标签内。
<script language=“javascript” src=“scriptaculous/prototype.js”></script>
<script language=“javascript” src=“scriptaculous/scriptaculous.js”></script>
然后你可以使用使用一些简单的代码来向scriptaculous.js发出请求需要什么样的效果，比如使用下面的函数调用“onlick”属性:
Effect.toggle(‘ID’,'type-of-effect’); return false
其中的ID是你想实现效果的层标签，type-of-effect是你要实现的效果。
下面是一个简单的示例：
<h1 onclick=“Effect.toggle(‘about-me‘,’blind‘); return false”>About me</h1>
<div id=“about-me“>...some content…</div>
请记住，你可以给任何你想要添加效果的html元素赋予一个ID标签，然后再给他们不同的特效。
我说的并不是很清楚，所以给你一个包含示例的JS文件的教程下载包也是应该的。

Web前端