Mootools 1.2教程(11)——Fx.Morph、Fx选项和Fx事件(3)
作者:Fdream 来源:Fdream博客 时间:2008-12-04 16:03:00
Fx的事件
Fx的事件使得你在动画效果的执行过程中,在不同的点执行一些代码。在创建用户反馈信息时这会很有用,这也给了你另一层控制权来控制你的渐变和形变:
onStart——当Fx开始时触发
onCancel——当Fx取消时触发
onComplete——当Fx完成时触发
onChainComplete——当Fx链完成时触发
当你建立一个渐变或者形变时,你可以设置这其中的一个事件,就像你设置一个或多个选项一样,不过不是设置一个值,而是设置一个函数:
参考代码:
// 首先我们把一个新的Fx.Tween赋值给一个变量
// 然后定义我们要渐变的元素
quadIn = new Fx.Tween(quadIn, {
// 这里是一些选项
link: 'cancel',
transition: ‘quad:in’,
// 这里是一些事件
onStart: function(passes_tween_element){
// 这些事件都会传递渐变的对象
// 因此当动画开始时
// 这里我们调用一个"highlight"效果
passes_tween_element.highlight('#C54641');
},
// 注意这个逗号是怎样始终出现在每个事件和选项之间的
// 但是最后一个事件或者选项后面没有
onComplete: function(passes_tween_element){
// 在结束时,我们再应用一个highlight效果
passes_tween_element.highlight('#C54641');
}
});
示例
为了生成上面的变形代码,我们可以用一种我们在这个系列的教程中还没有见过的方式来重用我们的函数。这上面所有的变形元素都使用了两个函数,一个当鼠标进入时渐变淡出,另外一个在当鼠标离开时渐变返回:
参考代码:
// 这是我们在鼠标进入时调用的函数
// 宽度渐变到700px
var enterFunction = function() {
this.start('width', '700px');
}
// 这是我们在鼠标离开时调用的函数
// 宽度渐变回300px
var leaveFunction = function() {
this.start('width', '300px');
}
window.addEvent('domready', function() {
// 这里我们把一些元素赋值给变量
var quadIn = $('quadin');
var quadOut = $('quadout');
var quadInOut = $('quadinout');
// 然后我们创建三个渐变元素
// 分别对应上面的三个变量
quadIn = new Fx.Tween(quadIn, {
link: 'cancel',
transition: Fx.Transitions.Quad.easeIn,
onStart: function(passes_tween_element){
passes_tween_element.highlight('#C54641');
},
onComplete: function(passes_tween_element){
passes_tween_element.highlight('#E67F0E');
}
});
quadOut = new Fx.Tween(quadOut, {
link: 'cancel',
transition: 'quad:out'
});
quadInOut = new Fx.Tween(quadInOut, {
link: 'cancel',
transition: 'quad:in:out'
});
// 现在我们添加鼠标进入和鼠标离开事件
// 注意.addEvents的使用
// 则和.addEvent的使用类似
// 不过你可以通过下面的模式添加多个事件
$('quadin').addEvents({
// 首先,你要说明是什么事件,并把事件用单引号引起来
// 然后后面跟一个冒号(:)
// 最后放置你的函数
// 在这个例子中,函数banding到这个渐变对象
'mouseenter': enterFunction.bind(quadIn),
'mouseleave': leaveFunction.bind(quadIn)
});
$('quadout').addEvents({
// 注意我们这里是怎样重复使用这个函数的
'mouseenter': enterFunction.bind(quadOut),
'mouseleave': leaveFunction.bind(quadOut)
});
$('quadinout').addEvents({
// 我们这里也使用了那些同样的函数
// 不过每次我们都应用一个事件到不同的元素
// 并且绑定不同的渐变
'mouseenter': enterFunction.bind(quadInOut),
'mouseleave': leaveFunction.bind(quadInOut)
});
更多学习……
你可以通过Fx库里面的工具来获得对效果更细致的控制权。请一定要阅读一下文档中的Fx这一节,还有tween、morph和transitions。
远程下载地址:下载一个包含你开始所需要的东西的zip包(29.07 KB)
asp之家下载:mootorial_day11_fx_morph_and_options.zip (29.07 KB)
包括这个页面上的实例,MooTools 1.2核心库,一个外部的JavaScript文件,一个外部的CSS文件或者一个简单的html文件。
标签:Mootools,1.2,教程,Fx.Morph,fx,事件
0
投稿
猜你喜欢
一段ASP的HTTP_REFERER判断代码
2011-03-25 10:41:00
asp_数据库操作封装
2010-04-03 21:00:00
ASP正则获取图片地址
2009-09-03 13:18:00
停止事件冒泡和阻止浏览器默认行为的脚本
2008-09-09 22:09:00
也来谈谈”完美”跨域
2008-12-19 12:34:00
javascript 获取硬盘信息代码
2007-12-08 21:27:00
SQL语句练习实例之四 找出促销活动中销售额最高的职员
2011-11-03 16:47:03
用javascript实现页面无刷新更新数据
2011-08-14 07:54:08
读取MySQL的log方法
2011-07-01 12:04:57
HTML5 第二份草案发布
2008-06-17 17:42:00
细化解析:怎样把你的MySQL完全中文化
2008-12-19 17:48:00
SQL Server 复制需要有实际的服务器名称才能连接到服务器
2012-07-11 15:46:51
js和asp操作fso比较
2007-09-23 09:17:00
产品设计与用户体验
2009-02-02 10:15:00
JavaScript 各种动画渐变效果
2008-09-02 10:38:00
asp下几种常用排序算法
2011-04-18 10:33:00
asp获取数据库中表名和字段名的代码
2011-04-18 11:02:00
SQL SERVER 建立索引
2010-07-02 21:01:00
MySQL索引类型一览 让MySQL高效运行起来
2010-04-22 16:52:00
怎样在不同版本SQL Server中存储数据
2009-01-20 13:11:00