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

六月 2nd, 2009  Tags: 菜单效果
    

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

clip_image001

  1. 首先,你应该在你的网页代码里面调用准备好需要的js文件,放在<head>标签内。    
    <script language=“javascript” src=“scriptaculous/prototype.js”></script>      
    <script language=“javascript” src=“scriptaculous/scriptaculous.js”></script>
  2. 然后你可以使用使用一些简单的代码来向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标签,然后再给他们不同的特效。
  3. 我说的并不是很清楚,所以给你一个包含示例的JS文件的教程下载包也是应该的。

发表回复