<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>EffectAssembledTest.html</title>
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="scriptaculous.js"></script>
<style type="text/css">
.class1{
color: #345456;
font-weight: 800;
font-size: 30px;
background-color: #12ff56;
width: 300px;
}
</style>
</head>
<body>
<div id="div" class="class1">
<div>
This is a test.
</div>
</div>
<select id="sel">
<option value="Effect.Appear">Effect.Appear</option>
<option value="Effect.Fade">Effect.Fade</option>
<option value="Effect.Puff">Effect.Puff</option>
<option value="Effect.DropOut">Effect.DropOut</option>
<option value="Effect.Shake">Effect.Shake</option>
<option value="Effect.SwitchOff">Effect.SwitchOff</option>
<option value="Effect.BlindDown">Effect.BlindDown</option>
<option value="Effect.BlindUp">Effect.BlindUp</option>
<option value="Effect.SlideDown">Effect.SlideDown</option>
<option value="Effect.SlideUp">Effect.SlideUp</option>
<option value="Effect.Pulsate">Effect.Pulsate</option>
<option value="Effect.Squish">Effect.Squish</option>
<option value="Effect.Fold">Effect.Fold</option>
<option value="Effect.Grow">Effect.Grow</option>
<option value="Effect.Shrink">Effect.Shrink</option>
</select>
<input type="button" onclick="test()" value="click" />
<select id="sel2">
<option value="slide">slide</option>
<option value="blind">blind</option>
<option value="appear">appear</option>
</select>
<input type="button" onclick="test2()" value="click" />
</body>
<script type="text/javascript">
//测试15种组合特效
function test () {
var strScript = $F("sel") + "('div');";
//运行特效
eval(strScript);
}
//测试Effect.toggle方法
function test2 () {
//生成执行特效脚本
var strScript = "Effect.toggle('div', '" + $F("sel2") + "');";
eval(strScript);
}
</script>
</html>
分享到:
相关推荐
script.aculo.us通过高度模块化的设计,使得开发者可以轻松选择和组合所需的功能,无需编写复杂的JavaScript代码。 ### 二、本书亮点与评价 本书被赞誉为Prototype和script.aculo.us开发者的必备指南。它不仅仅是...
ajax的两个框架,prototype是一个非常基础的框架,它对JavaScript固有的对象进行了扩展,还提供了若干自定义的类和对象,帮助...对于中小型的Ajax应用项目应用项目而言,prototype+script.aculo.us是一个非常不错的组合
1. **Visual Effects**:script.aculo.us提供了一系列预定义的动画效果,如淡入淡出、滑动和弹跳等,可以通过简单的API调用来实现。 2. **UI组件**:script.aculo.us包含了许多可重用的UI组件,如Autocompleter...
Script.aculo.us提供了多种视觉效果,这些效果可以单独使用,也可以组合起来形成更复杂的动画。 ##### 3.1 核心效果 - **Effect.Morph**:动态调整DOM元素的CSS属性(如大小、位置等)。 - **Effect.Move**:平移...
1. **动画效果**:通过Effect库,Script.aculo.us 可以轻松实现各种视觉效果,如淡入淡出、滑动、旋转等。 2. **UI组件**:包括 Autocompleter(自动补全)、Sortable(可排序列表)、Builder(构建UI元素)等,这些...
10.3.2 通过Script.aculo.us实现视觉效果 10.3.3 通过Moo.fx实现逼真的运动效果 10.3.4 圆角效果 10.3.5 其他库 10.4 行为增强 10.5 小结 第十一章 丰富的Mashup!运用API添加地图/搜索及更多功能 第十二章 ...
10.3.2 通过Script.aculo.us实现视觉效果 10.3.3 通过Moo.fx实现逼真的运动效果 10.3.4 圆角效果 10.3.5 其他库 10.4 行为增强 10.5 小结 第十一章 丰富的Mashup!运用API添加地图/搜索及更多功能 第十二章 ...
3. **Script.aculo.us Integration**: 提供与流行的JavaScript库(如jQuery或Prototype)的集成。 **六、DWR的安全性和优化** DWR提供了一些安全特性,如CSRF防护、方法访问控制等。同时,可以通过配置减少网络传输...
4. **效果库(Effect Library)**: 包含多种视觉效果,如颜色渐变、大小变化、旋转等,可以组合使用创建复杂的动画序列。 5. **表单助手(Form Helpers)**: 为表单元素添加增强功能,如自动完成(AutoComplete)、验证...
10.3.2 通过Script.aculo.us实现视觉效果 10.3.3 通过Moo.fx实现逼真的运动效果 10.3.4 圆角效果 10.3.5 其他库 10.4 行为增强 10.5 小结 第11章 丰富的Mashup!运用API添加地图、...
10.3.2 通过Script.aculo.us实现视觉效果 10.3.3 通过Moo.fx实现逼真的运动效果 10.3.4 圆角效果 10.3.5 其他库 10.4 行为增强 10.5 小结 第11章 丰富的Mashup!运用API添加地图、...
10.3.2 通过Script.aculo.us实现视觉效果 10.3.3 通过Moo.fx实现逼真的运动效果 10.3.4 圆角效果 10.3.5 其他库 10.4 行为增强 10.5 小结 第11章 丰富的Mashup!运用API添加地图、...
- **官方网站**:http://script.aculo.us/ - **Amy Hoy 的教程**:www.slash7.com 通过上述介绍,相信你已经对 Scriptaculous 的使用有了基本的了解。无论是用于创建动态网站还是增强用户界面,Scriptaculous 都是...
例如,Google网络开发工具箱、 dojo跨浏览器平台、script.aculo.us以及Firebug等工具,都可以帮助开发人员更好地实现和调试Ajax应用。 误区五:Ajax会破坏用户的浏览器使用体验 使用Ajax可能会导致浏览器的一些功能...