Mootools 1.2教程(11)——Fx.Morph、Fx选项和Fx事件
作者:Fdream 来源:Fdream博客 发布时间:2008-12-04 16:03:00
标签:Mootools,1.2,教程,Fx.Morph,fx,事件
原文地址:30 Days of Mootools 1.2 Tutorials - Day 11 - Using Fx.Morph, Fx Options and Fx Events
MooTools 1.2的Fx.Morph、Fx选项和Fx事件
阅读上一讲:Mootools 1.2教程(10)——Fx.Tween的使用
今天,我们继续探索一下这个库的Fx部分,我们将学习如何使用Fx.Morph(它从本质上可以让你同时渐变多个样式表属性),然后我们再检查一下应用到Fx.Tween和Fx.Morph的一些Fx选项,最后我们将看看如何使用Fx事件,譬如“onComplete”和“onStart”。通过这些选项和事件,我们可以获得更好的控制权来控制形变动画。
Fx.Morph
创建一个新的Fx.Morph
初始化一个新的形变和创建一个新的渐变很类似,除了你要指定多个样式属性以外。
参考代码:
// 首先,把我们的元素赋值给一个变量
var morphElement = $('morph_element');
// 现在,我们创建一个新的形变
var morphObject = new Fx.Morph(morphElement);
// 现在我们可以设置样式属性,就像Fx.Tween一样
// 不过我们这里可以设置多个样式属性
morphObject.set({
'width': 100,
'height': 100,
'background-color': '#eeeeee'
});
// 我们也可以像启动一个渐变一样来启动我们的形变
// 不过我们这里要同时放置多个属性值
morphObject.start({
'width': 300,
'height': 300,
'background-color': '#d3715c'
});
上面这些就是全部的内容了,包括创建、设置和启动一个形变。
为了让这个更合理一些,我们应该创建我们的变量,把我们的函数独立出来,并创建一些事件来控制这这个事情:
参考代码:
var morphSet = function(){
// 这里我们可以像Fx.Tween一样设置样式属性
// 不过在这里我们可以同时设置多个样式属性
this.set({
'width': 100,
'height': 100,
'background-color': '#eeeeee'
});
}
var morphStart = function(){
// 我们也可以像启动一个渐变一样启动一个形变
// 不过现在我们可以同时设置多个样式属性
this.start({
'width': 300,
'height': 300,
'background-color': '#d3715c'
});
}
var morphReset = function(){
// 设置为最开始的值
this.set({
'width': 0,
'height': 0,
'background-color': '#ffffff'
});
}
window.addEvent('domready', function() {
// 首先,把我们的元素赋值给一个变量
var morphElement = $('morph_element');
// 现在,我们创建我们的形变
var morphObject = new Fx.Morph(morphElement);
// 在这里我们给按钮添加点击事件
// 并且绑定morphObject和这个函数
// 从而可以在上面的函数中使用"this"
$('morph_set').addEvent('click', morphSet.bind(morphObject));
$('morph_start').addEvent('click', morphStart.bind(morphObject));
$('morph_reset').addEvent('click', morphReset.bind(morphObject));
});
参考代码:
<div id="morph_element"></div>
<button id="morph_set">Set</button>
<button id="morph_start">Start</button>
<button id="morph_reset">reset</button>
0
投稿
猜你喜欢
- 写了几年代码,很少谈到javascript程序的执行效率问题,今天就举几个例子看看,让大家看看程序优化是多么重要。这节来看看createEl
- asp之家补充两点,以让大家看的更明白:一.什么是GUID?由于水平有限在看到这篇文章时,我并不了解什么是GUID,为了看懂文章当然先请教一
- 如何用ASP建立Index Server查询对象并为其参数赋值?我们有两个方法可以做到这一点。一个方法是利用Index Server que
- 使用select @@identity 得到刚插入数据的ID1.适用于所有 ADO 版本<%Dim loConn, 
- MySQL内部复制功能是建立在两个或两个以上服务器之间,通过设定它们之间的主-从关系来实现的。其中一个作为主服务器,其它的作为从服务器。本节
- 也许有人会说我火星了,但我的确是第一次知道,欢迎我从火星归来吧。在 Yahoo! 首页上隐藏着这样一个小秘密,大家到 www.yahoo.c
- SQL中的单记录函数1.ASCII返回与指定的字符对应的十进制数;SQL> select ascii('A') A,a
- 密码保护是注册过程中的关键环节,尤其是对帐户安全级别比较高的网站,尤其在账号被盗或者涉及安全登录等问题的情况下,密码保护问题作为用户身份识别
- 本文介绍如何建立基于Web的日历,同时为不熟悉Active Server Pages(ASP)、SQL和ADO的开发者提供建立Web站点的过
- 现状≠将来?程序员做设计本身就很悲哀,纠结于客户与坚持之间就更是如此。无论我今后的路会怎么走,我想始终不变的事情就是与客户博弈了。无论是放弃
- 创建用户定义函数,它是返回值的已保存的 Transact-SQL 例程。用户定义函数不能用于执行一组修改全局数据库状态的操作。与系统函数一样
- 最近在处理Qzone黄钻图标更新时,想起近期对业务图标进行优化所遇到的一些问题,把思绪收拾起来和大家一共探讨,欢迎多方声音。在实际工作中,图
- SQL Server会把经常使用到的数据缓存在内存里(就是数据页缓存),用以提高数据访问速度。因为磁盘访问速度远远低于内存,所以减少磁盘访问
- 在html 5增加了新元素header、footer,测试过发现IE不能解析html 5新增的元素。代码如下:<!DOCTYPE ht
- 经常会在连接DB的时候用到,就是不知道代表什么意思。。。RS.OPEN SQL,CONN,A,BA: ADOPENFORWARDONLY(=
- 平面设计 常用尺寸 三折页广告 标准尺寸: (A4)210mm x 285mm普通宣传册 标准尺寸: (A4)210mm x 285mm文件
- SQL语句更改表所有者SQL语句更改表所有者单个修改所有者sql语句如下:查询分析器输入:EXEC sp_changeobject
- parent.html 中的代码为:<iframe marginwidth="0"
- 深底色风格的页面设计很受欢迎,它可以创造出别致优雅、极富创造力的效果。深底色设计适用于许多网站类型,但并非所有。这种风格应该在恰当的条件下使
- 什么是浮动?浮动是 css 的定位属性。我们可以看一下印刷设计来了解它的起源和作用。印刷布局中,文本可以按照需要围绕图片。一般把这种方式称为