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

当前位置: 首页 > 图文教程 > 网络编程 > Javascript > Mootools 1.2教程同时进行多个形变动画

Javascript: JS 文件本身编码转换图文教程; jQuery Ajax之$.get()方法和$.post()方法; jQuery Ajax之load()方法; JavaScript 核心参考教程内置对象; JavaScript 核心参考教程 RegExp对象; javascript hashtable实现代码; 百度留言本js 大家可以参考下; javascript 判断某年某月有多少天的实现代码推荐; 让iframe子窗体取父窗体地址栏参数(querystring); jquery pagination插件实现无刷新分页代码; jQuery与javascript对照学习获取父子前后元素实现代码; 通用javascript脚本函数库方便开发; JQuery 绑定事件时传递参数的实现方法; 支持IE,Firefox的javascript 日历控件; javascript 变速加数功能实现代码; extjs 学习笔记（一）一些基础知识; extjs 学习笔记（二） Ext.Element类; Jquery 学习笔记（一）; 一些技巧性实用js代码小结; jquery 常用操作整理基础入门篇

No. « ‹ 260 261 262 263 › »

技术文章搜索

关键字

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

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-10-10 浏览: 80 ::

收藏到网摘: n/a

Mootools 1.2教程(21)：类（二） Mootools 1.2教程滑动效果（Slide）

今天我们来学习一下Fx.Elements插件，这是一个基于Fx.Morph的插件。与应用于单个元素不同的是，Fx.Elements可以允许你一次性给多个元素添加动画。这在你给多个元素添加有相同选项的形变动画时非常有用。就像我们在第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(); 
}); 
}); 

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

更多学习

评论 (0) All

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

更多学习

评论 (0) All

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