`
zarknight
  • 浏览: 147915 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

mootools【十一】- 多彩的开始

阅读更多
        mootools中集成了一些非常好用的界面组件, 也提供了非常好用的界面效果工具类,用这些工具做界面效果,感觉上比用Prototype+Scriptaculous开发更方便,效果也更加的顺畅平滑。
       mootools的界面库Moo.Fx的设计十分的讲究OO原则,通过对提供了基本功能的基类的继承,扩展出了不同功能的工具类和组件类。Fx.Base就是这样一个基础类,它本身实现了Events,Chain,Options三个类,它包含了界面效果的最基本的动作和属性:

构造方法的可选属性:
------------------------------------------------------------------------------------------------------------------------------
onStart           - 效果开始前执行的方法,默认是一个空的function。你可以指定你的function。
onComplete - 完成效果后执行的方法,默认是一个空的function。你可以指定你的function。
onCancel      -  中断效果后执行的方法,默认是一个空的function。你可以指定你的function。
transition       - 效果的过渡变换所使用的方程,用来描述效果的变化规律。你可以在Fx.Transitions类中找到其他的方程,默认使用的是Fx.Transitions.sineInOut(即正弦)
duration         - 变化频率,毫秒。默认为500。
unit                 - 变化量的单位。默认是'px',你可以指定如'em','%'之类。
wait                - true/false。指定在执行下一个过渡效果之前是否等待当前的过渡效果执行结束。默认为true
fps                 - 帧频。即每秒所执行的变换次数。默认为30帧/秒。

------------------------------------------------------------------------------------------------------------------------------

方法:set
作用:不经过过渡变换效果,直接设置为指定的值
js 代码
 
  1. var myFx = new Fx.Style('myElement', 'opacity').set(0);  


方法:start
作用:执行效果,让指定的开始值过渡变换到指定的结束值
js 代码
 
  1. var myFx = new Fx.Style('myElement', 'opacity').start(0,1);  


方法:stop
作用:中断效果的执行,如果指定了参数为false,则会执行onCancel指定的方法。


最后,如果要查看有哪些变换方程可以选用,可以看Fx.Transitions.js里的Fx.Transitions类,里面提供了非常之多的变换方程,具体的效果差别,自己去一个个去试试看吧。

 

分享到:
评论

相关推荐

    mootools-1.2.2-core-nc.js

    mootools-1.2.2-core-nc

    mootools-release-1.11

    "mootools-release-1.11"是MooTools的一个特定版本,发布于2010年,旨在提供稳定性和兼容性的更新。这个版本在当时是一个重要的里程碑,因为它包含了多个关键的改进和修复。 MooTools的核心设计理念是遵循“Write ...

    mootools-core-1.4.5

    mootools,Javascript只能提示工具所必须的js文件

    mootools-core-1.5.1

    Mootools从Prototype.js中汲取了许多有益的设计理念,语法也和其极其类似。但它提供的功能要比Prototype.js多,整体设计也比Prototype.js要相对完善,功能更强大,比如增加了动画特效、拖放操作等等。总之,Mootools...

    mootools-1.2.1-core-nc.js

    开源js框架,非常不错,没什么很多介绍的,如果你是做web开发的,千万不要错过

    MooTools1.4中文PDF手册+MooTools-Core-1.5.1.js

    MooTools 1.4中文PDF手册与MooTools-Core-1.5.1.js是学习和使用MooTools的核心资源。 1. **MooTools的基本概念** - **类与对象**:MooTools基于原型的面向对象系统使得创建和继承类变得简单。你可以定义类并为它们...

    mootools-core-1.4.5-full-compat.js

    mootools-core-1.4.5-full-compat.js

    Python库 | django-mootools-behavior-0.1.tar.gz

    **Python库 django-mootools-behavior-0.1** `django-mootools-behavior-0.1.tar.gz` 是一个针对Python编程语言和Django框架的扩展库,主要用于增强网页前端的行为交互。这个库将MooTools JavaScript库与Django后端...

    mootools-12-cheat-sheet

    ### Mootools-12 Cheat Sheet详解 #### 一、Mootools简介 Mootools 是一个简洁且功能强大的 JavaScript 框架,它提供了一系列的工具和方法来简化前端开发工作。Mootools 的设计哲学是“写少做多”,这使得开发者...

    mootools-12-cheat-sheet-pf.pdf

    ### Mootools核心知识点解析:mootools-12-cheat-sheet-pf.pdf概览 Mootools是一款轻量级且功能强大的JavaScript框架,旨在简化Web开发中的常见任务,如DOM操作、事件处理、动画以及AJAX交互。本文将根据提供的文件...

    MooTools-1.2-Beginner

    ### MooTools 1.2 Beginner知识点详解 #### 一、MooTools简介 MooTools是一种轻量级、模块化且面向对象的JavaScript框架。它极大地加速并增强了开发功能丰富的Ajax/JavaScript网络应用的过程。MooTools最初由...

    mootools1.2 core

    这个压缩包包含两个核心文件:`mootools-1.2.4-core-nc.js`和`mootools-1.2.4-core-server.js`。 1. **MooTools 1.2 Core** - **模块化设计**:MooTools采用模块化的架构,允许开发者按需加载特定功能,降低页面...

    前端项目-mootools-more.zip

    **前端项目-mootools-more.zip** 是一个包含MooTools扩展库的压缩包,主要针对的是使用MooTools JavaScript框架进行前端开发的项目。MooTools是一个轻量级且高度模块化的JavaScript库,旨在提高开发效率,提供面向...

    Ajax-mootools-doc教程--手册.rar

    通过学习"Ajax-mootools-doc教程--手册.rar"中的内容,开发者不仅可以掌握Ajax的基础知识,还能深入理解MooTools库的使用,提高JavaScript开发效率,尤其在创建动态、响应式的Web应用程序方面。这份资料对初学者和有...

    mootools 1.5.1 最新版下载.rar

    mootools插件 1.5.1 最新版下载,目前,mootools插件的最新版本是1.5.1,这个插件实现的功能不亚于jquery,是一款同样优秀的js插件,为了大家方便,在此与大家... mootools JS文件在mootools-core-1.5.1\dist目录下。

    mootools-中文教程

    #### 十一、多彩的开始 这部分可能介绍了Mootools的一些高级用法或特殊功能,帮助开发者更好地理解和运用这个框架。 #### 十二、实践案例 通过具体的应用示例来展示如何在实际项目中应用 Mootools,这对于初学者来...

    mootools.js插件 1.4.5 core下载.zip

    比prototypejs更丰富、更强大的mootools.js插件 1.4.5 core下载。mootools.js可以生成较为复杂的、动态的网页交互效果,和jquery一样强大。。Mootools从Prototype.js中汲取了许多有益的设计理念,语法也和其极其类似...

    基于mootools的菜单Mootree

    "基于mootools的菜单Mootree" 指的是一个使用MooTools JavaScript库开发的树形菜单组件。MooTools是一个轻量级且功能丰富的JavaScript框架,它提供了一系列用于创建交互式网页的工具。Mootree则是这个框架下专门用于...

    mootools-v1.4.5.chm

    mootools1.4.5英文CHM帮助文档

    mootools源代码说明

    MooTools是一个简洁,模块化,面向对象的JavaScript框架。它能够帮助你更快,更简单地编写可扩展和兼容性强的 JavaScript代码。Mootools从Prototype.js中汲取了许多有益的设计理念,语法也和其极其类似。但它提供的...

Global site tag (gtag.js) - Google Analytics