Mootools 1.2教程 同时进行多个形变动画


Posted in Javascript onSeptember 15, 2009

这在你给多个元素添加有相同选项的形变动画时非常有用。就像我们在第20讲中看到的最后一个例子一样。
基本用法
使用Fx.Elements的方法看起来和Fx.Morph差不多。这两者之间的区别在于.start({})方法和.set({})方法。
为了保证事情简洁,让我们首先建立一个元素数组,以用来传递给Fx.Elements。
参考代码: [复制代码] [保存代码]
var fxElementsArray = $$('.myElementClass');
现在我们就可以把我们的数组传递给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的全部内容了。可以看看下面的例子,看看它们是怎么使用的。
示例代码
这里我们对两个元素使用了Fx.Elements。在渐变动画中有几个不同的类型可以选择,同时暂停按钮可以让你暂停动画。
首先,我们来创建我们的元素,我们的可能告知按钮(包括重置(reset)按钮、暂停(pause)按钮和恢复(resume)按钮),还有一些指示器,以便让我们看明白这个过程。
参考代码:
<div id="start_ind" class="ind">onStart</div> 
<div id="cancel_ind" class="ind">onCancel</div> 
<div id="complete_ind" class="ind">onComplete</div> 
<div id="chain_complete_ind" class="ind">onChainComplete</div> 
<span id='buttons'> 
<button id="fxstart">Start A</button> 
<button id="fxstartB">Start B</button> 
<button id="fxset">Reset</button> 
<button id="fxpause">Pause</button> 
<button id="fxresume">Resume</button> 
</span> 
<div class="myElementClass">Element 0</div> 
<div class="myElementClass">Element 1</div>

我们的CSS代码也很简单
参考代码:
.ind { 
width: 200px; 
padding: 10px; 
background-color: #87AEE1; 
font-weight: bold; 
border-bottom: 1px solid white; 
} 
.myElementClass { 
height: 50px; 
width: 100px; 
background-color: #FFFFCC; 
border: 1px solid #FFFFCC; 
padding: 20px; 
} 
#buttons { 
margin: 20px 0; 
display: block; 
}

下面是MooTools代码。
参考代码:
var startFXElement = function(){ 
this.start({ 
'0': { 
'height': [50, 200], 
'width': 50, 
'background-color': '#87AEE1' 
}, 
'1': { 
'width': [100, 200], 
'border': '5px dashed #333' 
} 
}); 
} 
var startFXElementB = function(){ 
this.start({ 
'0': { 
'width': 500, 
'background-color': '#333' 
}, 
'1': { 
'width': 500, 
'border': '10px solid #DC1E6D' 
} 
}); 
} 
var setFXElement = function(){ 
this.set({ 
'0': { 
'height': 50, 
'background-color': '#FFFFCC', 
'width': 100 
}, 
'1': { 
'height': 50, 
'width': 100, 
'border': 'none' 
} 
}); 
} 
window.addEvent('domready', function() { 
var fxElementsArray = $$('.myElementClass'); 
var startInd = $('start_ind'); 
var cancelInd = $('cancel_ind'); 
var completeInd = $('complete_ind'); 
var chainCompleteInd = $('chain_complete_ind'); 
var fxElementsObject = new Fx.Elements(fxElementsArray, { 
//Fx Options 
link: 'chain', 
duration: 1000, 
transition: 'sine:in:out', 
//Fx Events 
onStart: function(){ 
startInd.highlight('#C3E608'); 
}, 
onCancel: function(){ 
cancelInd.highlight('#C3E608'); 
}, 
onComplete: function(){ 
completeInd.highlight('#C3E608'); 
}, 
onChainComplete: function(){ 
chainCompleteInd.highlight('#C3E608'); 
} 
}); 
$('fxstart').addEvent('click', startFXElement.bind(fxElementsObject)); 
$('fxstartB').addEvent('click', startFXElementB.bind(fxElementsObject)); 
$('fxset').addEvent('click', setFXElement.bind(fxElementsObject)); 
$('fxpause').addEvent('click', function(){ 
fxElementsObject.pause(); 
}); 
$('fxresume').addEvent('click', function(){ 
fxElementsObject.resume(); 
}); 
});

更多学习

正如你所看到的,Fx.Elements非常简单。要更深入地学习,可以仔细地阅读一下Fx.Elements文档Fx.Morph文档Fx文档

另外,确保阅读过我们关于Fx.Morph和Fx选项及事件的教程

下载最后一个示例的代码

也包含你开始实践所需要的所有东西。

Javascript 相关文章推荐
JavaScript 特殊字符
Apr 05 Javascript
JS对外部文件的加载及对IFRMAME的加载的实现,当加载完成后,指定指向方法(方法回调)
Jul 04 Javascript
js输入框邮箱自动提示功能代码实现
Dec 10 Javascript
原生javascript实现Tab选项卡切换功能
Jan 12 Javascript
JSON与XML优缺点对比分析
Jul 17 Javascript
jquery mobile 实现自定义confirm确认框效果的简单实例
Jun 17 Javascript
完美解决input[type=number]无法显示非数字字符的问题
Feb 28 Javascript
微信小程序实现缓存根据不同的id来进行设置和读取缓存
Jun 12 Javascript
js Dom实现换肤效果
Oct 21 Javascript
使用vue-cli4.0快速搭建一个项目的方法步骤
Dec 04 Javascript
从零开始在vue-cli4配置自适应vw布局的实现
Jun 08 Javascript
关于angular 8.1使用过程中的一些记录
Nov 25 Javascript
Mootools 1.2教程(21)——类(二)
Sep 15 #Javascript
Mootools 1.2教程 选项卡效果(Tabs)
Sep 15 #Javascript
Mootools 1.2教程 Tooltips
Sep 15 #Javascript
Mootools 1.2教程 类(一)
Sep 15 #Javascript
Mootools 1.2 手风琴(Accordion)教程
Sep 15 #Javascript
Mootools 1.2教程 排序类和方法简介
Sep 15 #Javascript
Mootools 1.2教程 滚动条(Slider)
Sep 15 #Javascript
You might like
那些年一起学习的PHP(一)
2012/03/21 PHP
php5.3 注意事项说明
2013/07/01 PHP
Codeigniter框架的更新事务(transaction)BUG及解决方法
2014/07/25 PHP
PHP之uniqid()函数用法
2014/11/03 PHP
golang 调用 php7详解及实例
2017/01/04 PHP
浅谈PHP接入(第三方登录)QQ登录 OAuth2.0 过程中遇到的坑
2017/10/13 PHP
PHP实现获取毫秒时间戳的方法【使用microtime()函数】
2019/03/01 PHP
浅析PHP反序列化中过滤函数使用不当导致的对象注入问题
2020/02/15 PHP
div模拟选择框示例代码
2013/11/03 Javascript
Javascript实现简单的富文本编辑器附演示
2014/06/16 Javascript
js自定义鼠标右键的实现原理及源码
2014/06/23 Javascript
JavaScript操作Oracle数据库示例
2015/03/06 Javascript
JS实现仿QQ面板的手风琴效果折叠菜单代码
2015/09/11 Javascript
Node.js用readline模块实现输入输出
2016/12/16 Javascript
如何学JavaScript?前辈的经验之谈
2016/12/28 Javascript
微信小程序-form表单提交代码实例
2019/04/29 Javascript
[01:16]DOTA2小知识课堂 Ep.03 芒果树无伤肉山
2019/12/05 DOTA
使用Python的PEAK来适配协议的教程
2015/04/14 Python
flask框架视图函数用法示例
2018/07/19 Python
python3.6使用urllib完成下载的实例
2018/12/19 Python
Django url,从一个页面调到另个页面的方法
2019/08/21 Python
基于Pytorch SSD模型分析
2020/02/18 Python
学习Python爬虫的几点建议
2020/08/05 Python
h5使用canvas画布实现手势解锁
2019/01/04 HTML / CSS
AmazeUI的JS表单验证框架实战示例分享
2020/08/21 HTML / CSS
Lookfantastic西班牙官网:英国知名美妆购物网站
2018/06/13 全球购物
管理专员自荐信
2014/01/26 职场文书
服装店营销方案
2014/03/10 职场文书
企业节能减排实施方案
2014/03/19 职场文书
2014年师德承诺书
2014/05/23 职场文书
大学生考试作弊检讨书
2014/09/21 职场文书
工作收入证明模板
2014/10/10 职场文书
安全生产工作汇报材料
2014/10/28 职场文书
2015年保送生自荐信
2015/03/24 职场文书
茶花女读书笔记
2015/06/29 职场文书
html5表单的required属性使用
2021/07/07 HTML / CSS