MooTools - Fx.Element

Fx.Element允许您将Fx功能添加到单个页面上的多个dom元素.实际上，Fx.Element是Fx.Morph插件的扩展. Fx.Element和Fx.Morph之间的唯一区别是语法.在此语法中， start({})方法用于创建效果，.set({})方法用于设置某些样式.

查看Fx.Element的以下语法.

语法

var fxElementsArray = $$('.myElementClass');var fxElementsObject = new Fx.Elements(fxElementsArray, {   //Fx Options   link: 'chain',   duration: 1000,   transition: 'sine:in:out',      //Fx Events   onStart: function(){      startInd.highlight('#C3E608');   }});

start({})和set({})

启动和设置关键字结构用于启动和设置样式.但是在这个结构中，你通过索引引用元素 - 第一个元素是0，第二个元素是1，依此类推.看一下Start和Set结构的以下语法.

语法

//you can set your styles with .set({...})fxElementsObject .set({   '0': {      'height': 10,      'width': 10,      'background-color': '#333'   },   '1': {      'width': 10,      'border': '1px dashed #333'   }});//or create a transition effect with .start({...})fxElementsObject .start({   '0': {      'height': [50, 200],      'width': 50,      'background-color': '#87AEE1'   },   '1': {      'width': [100, 200],      'border': '5px dashed #333'   }});

示例

让我们举一个解释Fx.Element的例子.请看下面的代码.

                                                var startFXElement = function(){            this.start({               '0': {                  'height': [50, 100],                  'width': 50,                  'background-color': '#87AEE1'               },                              '1': {                  'width': [100, 200],                  'border': '5px dashed #333'               }            });         }                  var startFXElementB = function(){            this.start({               '0': {                  'width': 300,                  'background-color': '#333'               },                              '1': {                  'width': 300,                  '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();            });         });                     onStart