`
wolfmaster
  • 浏览: 159157 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

script.aculo.us组合效果

    博客分类:
  • js
阅读更多
<!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>
分享到:
评论

相关推荐

    Prototype.and.script.aculo.us.Dec.2007.pdf

    script.aculo.us通过高度模块化的设计,使得开发者可以轻松选择和组合所需的功能,无需编写复杂的JavaScript代码。 ### 二、本书亮点与评价 本书被赞誉为Prototype和script.aculo.us开发者的必备指南。它不仅仅是...

    prototype and script.aculo.us框架

    ajax的两个框架,prototype是一个非常基础的框架,它对JavaScript固有的对象进行了扩展,还提供了若干自定义的类和对象,帮助...对于中小型的Ajax应用项目应用项目而言,prototype+script.aculo.us是一个非常不错的组合

    《Prototype and script.aculo.us终极揭秘》

    1. **Visual Effects**:script.aculo.us提供了一系列预定义的动画效果,如淡入淡出、滑动和弹跳等,可以通过简单的API调用来实现。 2. **UI组件**:script.aculo.us包含了许多可重用的UI组件,如Autocompleter...

    Javascript框架Script.aculo.us的英文文档

    Script.aculo.us提供了多种视觉效果,这些效果可以单独使用,也可以组合起来形成更复杂的动画。 ##### 3.1 核心效果 - **Effect.Morph**:动态调整DOM元素的CSS属性(如大小、位置等)。 - **Effect.Move**:平移...

    ajax框架源码

    1. **动画效果**:通过Effect库,Script.aculo.us 可以轻松实现各种视觉效果,如淡入淡出、滑动、旋转等。 2. **UI组件**:包括 Autocompleter(自动补全)、Sortable(可排序列表)、Builder(构建UI元素)等,这些...

    JavaScript DOM高级程序设计 Part I

    10.3.2 通过Script.aculo.us实现视觉效果 10.3.3 通过Moo.fx实现逼真的运动效果 10.3.4 圆角效果 10.3.5 其他库 10.4 行为增强 10.5 小结 第十一章 丰富的Mashup!运用API添加地图/搜索及更多功能 第十二章 ...

    JavaScript DOM高级程序设计 Part II

    10.3.2 通过Script.aculo.us实现视觉效果 10.3.3 通过Moo.fx实现逼真的运动效果 10.3.4 圆角效果 10.3.5 其他库 10.4 行为增强 10.5 小结 第十一章 丰富的Mashup!运用API添加地图/搜索及更多功能 第十二章 ...

    java 采用dwr框架构实现ajax

    3. **Script.aculo.us Integration**: 提供与流行的JavaScript库(如jQuery或Prototype)的集成。 **六、DWR的安全性和优化** DWR提供了一些安全特性,如CSRF防护、方法访问控制等。同时,可以通过配置减少网络传输...

    scriptaculous-js-1.9.0

    4. **效果库(Effect Library)**: 包含多种视觉效果,如颜色渐变、大小变化、旋转等,可以组合使用创建复杂的动画序列。 5. **表单助手(Form Helpers)**: 为表单元素添加增强功能,如自动完成(AutoComplete)、验证...

    [JavaScript.DOM高级程序设计](加)桑贝斯.扫描版.part2.rar

     10.3.2 通过Script.aculo.us实现视觉效果   10.3.3 通过Moo.fx实现逼真的运动效果   10.3.4 圆角效果   10.3.5 其他库   10.4 行为增强   10.5 小结   第11章 丰富的Mashup!运用API添加地图、...

    [JavaScript.DOM高级程序设计](加)桑贝斯.扫描版.part3.rar

     10.3.2 通过Script.aculo.us实现视觉效果   10.3.3 通过Moo.fx实现逼真的运动效果   10.3.4 圆角效果   10.3.5 其他库   10.4 行为增强   10.5 小结   第11章 丰富的Mashup!运用API添加地图、...

    [JavaScript.DOM高级程序设计](加)桑贝斯.扫描版.part1.rar

     10.3.2 通过Script.aculo.us实现视觉效果   10.3.3 通过Moo.fx实现逼真的运动效果   10.3.4 圆角效果   10.3.5 其他库   10.4 行为增强   10.5 小结   第11章 丰富的Mashup!运用API添加地图、...

    scriptaculous

    - **官方网站**:http://script.aculo.us/ - **Amy Hoy 的教程**:www.slash7.com 通过上述介绍,相信你已经对 Scriptaculous 的使用有了基本的了解。无论是用于创建动态网站还是增强用户界面,Scriptaculous 都是...

    Ajax 的六个误区小结分析

    例如,Google网络开发工具箱、 dojo跨浏览器平台、script.aculo.us以及Firebug等工具,都可以帮助开发人员更好地实现和调试Ajax应用。 误区五:Ajax会破坏用户的浏览器使用体验 使用Ajax可能会导致浏览器的一些功能...

Global site tag (gtag.js) - Google Analytics