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 相关文章推荐
jQuery-ui引入后Vs2008的无智能提示问题解决方法
Feb 10 Javascript
AngularJS快速入门
Apr 02 Javascript
JavaScript使用二分查找算法在数组中查找数据的方法
Apr 07 Javascript
纯CSS3代码实现滑动开关效果
Aug 19 Javascript
JavaScript实现窗口抖动效果
Oct 19 Javascript
ES6概念 Symbol.keyFor()方法
Dec 25 Javascript
详解Vue生命周期的示例
Mar 10 Javascript
微信小程序 标签传入数据
May 08 Javascript
JavaScript中concat复制数组方法浅析
Jan 20 Javascript
VUE中setTimeout和setInterval自动销毁案例
Sep 07 Javascript
手机浏览器唤起微信分享(JS)
Oct 11 Javascript
vue打包时去掉所有的console.log
Apr 10 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
用PHP实现WEB动态网页静态
2006/10/09 PHP
Session的工作方式
2006/10/09 PHP
PHP中字符安全过滤函数使用小结
2015/02/25 PHP
PHP与Ajax相结合实现登录验证小Demo
2016/03/16 PHP
非集成环境的php运行环境(Apache配置、Mysql)搭建安装图文教程
2016/04/12 PHP
详解CSS样式中的 !important * _ 符号
2021/03/09 HTML / CSS
js打开新窗口方法整理
2014/02/17 Javascript
jquery日历控件实现方法分享
2014/03/07 Javascript
基于Jquery+Ajax+Json实现分页显示附效果图
2014/07/30 Javascript
jQuery中的jQuery()方法用法分析
2014/12/27 Javascript
jQuery中wrapAll()方法用法实例
2015/01/16 Javascript
基于JavaScript制作霓虹灯文字 代码 特效
2015/09/01 Javascript
javascript实现自动填写表单实例简析
2015/12/02 Javascript
JavaScript+CSS无限极分类效果完整实现方法
2015/12/22 Javascript
jQuery实现选项卡功能(两种方法)
2017/03/08 Javascript
jQuery使用EasyUi实现三级联动下拉框效果
2017/03/08 Javascript
JavaScript数据结构之数组的表示方法示例
2017/04/12 Javascript
jQuery插件FusionCharts绘制的3D双柱状图效果示例【附demo源码】
2017/04/20 jQuery
jquery实现左右轮播图效果
2017/09/28 jQuery
node.js基于express使用websocket的方法
2017/11/09 Javascript
JavaScript实现鼠标移入随机变换颜色
2020/11/24 Javascript
[05:03]显微镜下的DOTA2第十期——Ti3豪之超神幽鬼
2014/06/23 DOTA
Python入门篇之字符串
2014/10/17 Python
详解Python的Django框架中manage命令的使用与扩展
2016/04/11 Python
Python实现基于C/S架构的聊天室功能详解
2018/07/07 Python
python矩阵运算,转置,逆运算,共轭矩阵实例
2020/05/11 Python
墨西哥巴士车票在线购买:ClickBus
2018/03/27 全球购物
用C或者C++语言实现SOCKET通信
2015/02/24 面试题
如何删除一个表里面的重复行
2013/07/13 面试题
Linux中如何用命令创建目录
2015/01/12 面试题
Java如何调用外部Exe程序
2015/07/04 面试题
2014年审计工作总结
2014/11/17 职场文书
中学生清明节演讲稿
2015/03/18 职场文书
2015年业务员工作总结范文
2015/04/07 职场文书
python可视化之颜色映射详解
2021/09/15 Python
C3 线性化算法与 MRO之Python中的多继承
2021/10/05 Python