js中引用script.aculo.us-CSDN博客

本文链接：https://blog.csdn.net/songzaiblog/article/details/16869933

今天学js学到引用框架，首先去官网下载包。官网地址：http://madrobby.github.io/scriptaculous/

首页引用src下的和lib下的文件：<script src="javascripts/prototype.js" type="text/javascript"></script>
<script src="javascripts/scriptaculous.js" type="text/javascript"></script>

其中第二个文件会自动引用其他几个几个js文件。

下面是一个例子，将集中特效绑定在特定的按钮点击事件上。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Test aculo</title>
<script src="javascripts/prototype.js" type="text/javascript"></script>
<script src="javascripts/scriptaculous.js" type="text/javascript"></script>
</head>
<body>
<h1>Test script.aculo.us</h1>
<form name="form1">
<input type="button" value="Fade Out"  onClick="new Effect.Fade($('test'))"/>
<input type="button" value="Fade In" οnclick="new Effect.Appear($('test'))"/>
<input type="button" value="Slide Up" οnclick="new Effect.SlideUp($('test'))"/>
<input type="button" value="Slide Down" οnclick="new Effect.SlideDown($('test'))"/>
<input type="button" value="High Light" οnclick="new Effect.Highlight($('test'))"/>
<input type="button" value="Shake" οnclick="new Effect.Shake($('test'))"/>
</form>
<div id="test" style="background-color:#ccc;margin:20px;padding:10px">
<h2>Testing Effects</h2>
<hr />
<p>
This section of the documentis within a <div>element whih the <b>id</b> value
<b>test</b>.The event handlers on the buttons above send this object to the script.aculo.us library
to perform effects.Click the buttons to see the effect.
</p>
</div>
</body>
</html>

加载后的页面效果图