Mootools 1.2教程(22)——同时进行多个形变动画
作者:Fdream 来源:Fdream 时间:2008-12-29 14:11:00
原文地址:30 Days of Mootools 1.2 Tutorials - Day 22 - Fx.Elements
通过Fx.Elements同时处理多个形变动画
阅读上一讲:Mootools 1.2教程(21)——类(二)
今天我们来学习一下Fx.Elements插件,这是一个基于Fx.Morph的插件。与应用于单个元素不同的是,Fx.Elements可以允许你一次性给多个元素添加动画。这在你给多个元素添加有相同选项的形变动画时非常有用。就像我们在第20讲中看到的最后一个例子一样。
基本用法
使用Fx.Elements的方法看起来和Fx.Morph差不多。这两者之间的区别在于.start({})方法和.set({})方法。
为了保证事情简洁,让我们首先建立一个元素数组,以用来传递给Fx.Elements。
参考代码:
现在我们就可以把我们的数组传递给Fx.Elements对象了。
参考代码:
var fxElementsObject = new Fx.Elements(fxElementsArray, {
// Fx选项
link: 'chain',
duration: 1000,
transition: 'sine:in:out',
// Fx事件
onStart: function(){
startInd.highlight('#C3E608');
}
和Fx.Morph一样,Fx.Elements扩展了Fx类,可以允许你使用Fx的全部选项和事件。
.start({})和.set({})方法
要开始一个Fx.Elements效果,或者使用Fx.Elements设置样式,你可以像使用Fx.Tween和Fx.Morph那样做,不过不是直接把设置直接应用到Fx.Elements对象上,而是通过索引引用对应的元素——第一个元素是0,第二个是1,以此类推。
参考代码:
// 你可以用.set({...})来设置样式
fxElementsObject .set({
'0': {
'height': 10,
'width': 10,
'background-color': '#333'
},
'1': {
'width': 10,
'border': '1px dashed #333'
}
});
// 或者用.start({...})创建渐变动画
fxElementsObject .start({
'0': {
'height': [50, 200],
'width': 50,
'background-color': '#87AEE1'
},
'1': {
'width': [100, 200],
'border': '5px dashed #333'
}
就像Fx.Morph,你可以为元素的渐变动画设定任何一个开始值和结束值,你也可以只设置一个参数(就像我们上面只给宽度设置了一个值),那么这个元素将会从当前值变化到新参数指定的值。
这就是关于Fx.Elements的全部内容了。可以看看下面的例子,看看它们是怎么使用的。
标签:Mootools,动画,插件,教程,javascript
0
投稿
猜你喜欢
python制作花瓣网美女图片爬虫
2023-05-20 01:51:55
Python 在 VSCode 中使用 IPython Kernel 的方法详解
2023-07-25 10:10:23
二级联动下拉菜单javascript源码
2010-03-16 12:32:00
详解mysql数据库增删改操作
2024-01-15 02:23:05
python获取网络图片方法及整理过程详解
2022-10-21 19:33:20
MySql 安装时的1045错误
2024-01-21 23:02:47
php获取文章内容第一张图片的方法示例
2023-11-09 18:55:14
使用python 进行区间取值的方法
2023-12-17 01:27:56
Python3 pandas 操作列表实例详解
2021-11-30 14:24:12
sql2005 数据库转为sql2000数据库的方法(数据导出导入)
2024-01-26 07:38:56
iscroll动态加载数据完美解决方法
2024-04-10 13:59:01
MySQL的一级防范检查列表
2011-12-14 18:39:22
python实现层次聚类的方法
2023-05-03 22:26:13
Mysql数据库性能优化三(分表、增量备份、还原)
2024-01-21 00:38:54
python itchat实现调用微信接口的第三方模块方法
2023-03-24 07:12:53
Python 爬虫之超链接 url中含有中文出错及解决办法
2023-07-27 00:25:06
PHP 简单日历实现代码
2023-07-01 12:00:01
asp无组件实现画简单图形的类
2004-06-17 13:30:00
AJAX概述
2007-11-03 13:41:00
QQ影音感念亲恩皮肤,不只是大按钮这么简单
2009-01-04 14:16:00