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 相关文章推荐
些很实用且必用的小脚本代码
Jun 26 Javascript
js中关于new Object时传参的一些细节分析
Mar 13 Javascript
javascript针对DOM的应用分析(四)
Apr 15 Javascript
js中哈希表的几种用法总结
Jan 28 Javascript
js通过八个点 拖动改变div大小的实现方法
Mar 05 Javascript
JavaScript iframe数据共享接口实现方法
Jan 06 Javascript
强大Vue.js组件浅析
Sep 12 Javascript
JavaScript定时器实现的原理分析
Dec 06 Javascript
js仿百度音乐全选操作
Jan 13 Javascript
微信小程序 image组件binderror使用例子与js中的onerror区别
Feb 15 Javascript
JS实现禁止用户使用Ctrl+鼠标滚轮缩放网页的方法
Apr 28 Javascript
微信小程序 navbar实例详解
May 11 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中使用反射技术的架构插件使用说明
2010/05/18 PHP
php检查页面是否被百度收录
2015/10/28 PHP
thinkphp利用模型通用数据编辑添加和删除的实例代码
2016/11/20 PHP
用javascript实现读取txt文档的脚本
2007/07/20 Javascript
JavaScript DOM学习第一章 W3C DOM简介
2010/02/19 Javascript
jQuery输入城市查看地图使用介绍
2013/05/08 Javascript
jquery实现下拉菜单的二级联动利用json对象从DB取值显示联动
2014/03/27 Javascript
IE6-8中Date不支持toISOString的修复方法
2014/05/04 Javascript
Flash图片上传组件 swfupload使用指南
2015/03/14 Javascript
基于JavaScript实现移动端TAB触屏切换效果
2015/10/20 Javascript
JavaScript如何动态创建table表格
2020/08/02 Javascript
分享有关jQuery中animate、slide、fade等动画的连续触发、滞后反复执行的bug
2016/01/10 Javascript
纯css下拉菜单 无需js
2016/08/15 Javascript
w3c编程挑战_初级脚本算法实战篇
2017/06/23 Javascript
基于iScroll实现下拉刷新和上滑加载效果
2017/07/18 Javascript
AngularJS 打开新的标签页实现代码
2017/09/07 Javascript
Vue仿手机qq的实例代码(demo)
2017/09/08 Javascript
Vue.set()实现数据动态响应的方法
2018/02/07 Javascript
详解Vue 多级组件透传新方法provide/inject
2018/05/09 Javascript
ES6中异步对象Promise用法详解
2019/07/31 Javascript
vue props 单项数据流实例分享
2020/02/16 Javascript
Python微信公众号开发平台
2018/01/25 Python
TensorFlow实现Batch Normalization
2018/03/08 Python
pandas.DataFrame.to_json按行转json的方法
2018/06/05 Python
对python中的argv和argc使用详解
2018/12/15 Python
Flask框架 CSRF 保护实现方法详解
2019/10/30 Python
python3 tkinter实现添加图片和文本
2019/11/26 Python
Selenium基于PIL实现拼接滚动截图
2020/04/10 Python
基于python连接oracle导并出数据文件
2020/04/28 Python
浅谈keras中loss与val_loss的关系
2020/06/22 Python
Python实现自动装机功能案例分析
2020/10/22 Python
入学生会自荐书范文
2014/02/05 职场文书
经典安踏广告词
2014/03/21 职场文书
2015年维修工作总结
2015/04/25 职场文书
居委会工作总结2015
2015/05/18 职场文书
Win10 heic文件怎么打开 ? Win10 heic文件打开教程
2022/04/06 数码科技