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 UrlDecode函数代码
Jan 09 Javascript
jquery中加载图片自适应大小主要实现代码
Aug 23 Javascript
js图片卷帘门导航菜单特效代码分享
Sep 10 Javascript
详解JavaScript数组的操作大全
Oct 19 Javascript
JS实现pasteHTML兼容ie,firefox,chrome的方法
Jun 22 Javascript
jQuery在header中设置请求信息的方法
Mar 06 Javascript
解决OneThink中无法异步提交kindeditor文本框中修改后的内容方法
May 05 Javascript
webpack下实现动态引入文件方法
Feb 22 Javascript
element-ui 实现响应式导航栏的示例代码
May 08 Javascript
vue实现列表滚动的过渡动画
Jun 29 Javascript
vue动态设置页面title的方法实例
Aug 23 Javascript
vue element和nuxt的使用技巧分享
Jan 14 Vue.js
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
十大催泪虐心动漫,你能坚持看到第几部?
2020/03/04 日漫
咖啡豆要不要放冰箱的原因
2021/03/04 冲泡冲煮
phpmyadmin操作流程
2006/10/09 PHP
php $_ENV为空的原因分析
2009/06/01 PHP
PHP return语句的另一个作用
2014/07/30 PHP
PHP实现网站应用微信登录功能详解
2019/04/11 PHP
Javascript学习笔记5 类和对象
2010/01/11 Javascript
jQuery 获取对象 基本选择与层级
2010/05/31 Javascript
jQuery参数列表集合
2011/04/06 Javascript
文本框水印提示效果的简单实现代码
2014/02/22 Javascript
使用javascript获取页面名称
2014/12/23 Javascript
JQuery中上下文选择器实现方法
2015/05/18 Javascript
jQuery on()方法示例及jquery on()方法的优点
2015/08/27 Javascript
JS 面向对象之继承---多种组合继承详解
2016/07/10 Javascript
AngularJS 输入验证详解及实例代码
2016/07/28 Javascript
详解jQuery中基本的动画方法
2016/12/14 Javascript
vue-infinite-loading2.0 中文文档详解
2018/04/08 Javascript
Angular 利用路由跳转到指定页面的指定位置方法
2018/08/31 Javascript
layer.confirm点击第一个按钮关闭弹出框的方法
2019/09/09 Javascript
python中实现定制类的特殊方法总结
2014/09/28 Python
10款最好的Web开发的 Python 框架
2015/03/18 Python
python基础入门学习笔记(Python环境搭建)
2016/01/13 Python
对python3 sort sorted 函数的应用详解
2019/06/27 Python
使用django实现一个代码发布系统
2019/07/18 Python
python获取百度热榜链接的实例方法
2020/08/25 Python
用 Django 开发一个 Python Web API的方法步骤
2020/12/03 Python
CSS3 制作绽放的莲花采用效果叠加实现
2013/01/31 HTML / CSS
Javascript如何发送一个Ajax请求
2015/01/26 面试题
小学班干部竞选演讲稿
2014/04/24 职场文书
小学生勤俭节约演讲稿
2014/08/28 职场文书
群众路线专项整治方案
2014/10/27 职场文书
教师工作态度自我评价
2015/03/05 职场文书
2015年教师学期工作总结
2015/04/30 职场文书
读书笔记格式
2015/07/02 职场文书
公司档案管理制度
2015/08/05 职场文书
《鸟的天堂》教学反思
2016/02/19 职场文书