MooTools教程(11):Fx.Morph、Fx选项和Fx事件

作者佚名技术来源网页制作浏览发布时间 2012-03-07

今天，我们继续探索一下这个库的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));
});

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢!

1 2 3 4 5 6 下一页

分享到：更多

你可能对下面的文章感兴趣

上一篇: rails制作rss feed下一篇: javascript变量作用域在不同浏览器的处理

关于MooTools教程(11):Fx.Morph、Fx选项和Fx事件的所有评论

随机推荐