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 相关文章推荐
Jvascript学习实践案例(开发常用)
Jun 25 Javascript
js window.print实现打印特定控件或内容
Sep 16 Javascript
js 3种归并操作的实例代码
Oct 30 Javascript
标题过长使用javascript按字节截取字符串
Apr 24 Javascript
使用Javascript简单实现图片无缝滚动
Dec 05 Javascript
浅谈js中的引用和复制(传值和传址)
Sep 18 Javascript
JavaScript实现按键精灵的原理分析
Feb 21 Javascript
Bootstrap 表单验证formValidation 实现远程验证功能
May 17 Javascript
React native ListView 增加顶部下拉刷新和底下点击刷新示例
Apr 27 Javascript
JavaScript实现邮箱后缀提示功能的示例代码
Dec 13 Javascript
js console.log打印对象时属性缺失的解决方法
May 23 Javascript
使用Vue Composition API写出清晰、可扩展的表单实现
Jun 10 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
IP攻击升级,程序改进以对付新的攻击
2010/11/23 PHP
PHP实现长文章分页实例代码(附源码)
2016/02/03 PHP
Yii2针对游客、用户防范规则和限制的解决方法分析
2016/10/08 PHP
childNodes.length与children.length的区别
2009/05/14 Javascript
juqery 学习之三 选择器 简单 内容
2010/11/25 Javascript
Prototype源码浅析 String部分(三)之HTML字符串处理
2012/01/15 Javascript
JS 实现导航栏悬停效果(续2)
2013/09/24 Javascript
js每隔5分钟执行一次ajax请求的实现方法
2013/11/27 Javascript
jQuery之选项卡的简单实现
2014/02/28 Javascript
js限制文本框只能输入整数或者带小数点的数字
2015/04/27 Javascript
详解Node.js如何开发命令行工具
2016/08/14 Javascript
基于js 本地存储(详解)
2017/08/16 Javascript
js canvas实现简单的图像扩散效果
2020/06/28 Javascript
swiper 解决动态加载数据滑动失效的问题
2018/02/26 Javascript
vue.js使用watch监听路由变化的方法
2018/07/08 Javascript
vue 权限认证token的实现方法
2018/07/17 Javascript
Bootstrap模态对话框中显示动态内容的方法
2018/08/10 Javascript
解决vue的变量在settimeout内部效果失效的问题
2018/08/30 Javascript
node中的cookie的具体使用
2018/09/13 Javascript
Vue 第三方字体图标引入 Font Awesome的方法
2018/09/28 Javascript
webpack3里使用uglifyjs压缩js时打包报错的解决
2018/12/13 Javascript
vue-router两种模式区别及使用注意事项详解
2019/08/01 Javascript
VUE项目axios请求头更改Content-Type操作
2020/07/24 Javascript
Python open()文件处理使用介绍
2014/11/30 Python
Python selenium文件上传方法汇总
2020/11/19 Python
Python二叉树的定义及常用遍历算法分析
2017/11/24 Python
python爬虫爬取淘宝商品信息(selenum+phontomjs)
2018/02/24 Python
使用Python处理Excel表格的简单方法
2018/06/07 Python
Django中的用户身份验证示例详解
2019/08/07 Python
pywinauto自动化操作记事本
2019/08/26 Python
详解移动端HTML5页面端去掉input输入框的白色背景和边框(兼容Android和ios)
2016/12/15 HTML / CSS
专科毕业生求职简历的自我评价
2013/10/12 职场文书
医药专业应届毕业生求职信范文
2014/01/01 职场文书
新春寄语大全
2014/04/09 职场文书
教师病假条范文
2015/08/17 职场文书
vue使用element-ui按需引入
2022/05/20 Vue.js