开发手册 欢迎您!
软件开发者资料库

MooTools - Fx.Element

MooTools Fx.Element - 从简介,安装,程序结构,选择器,使用数组,函数,事件处理,DOM操作,样式属性,输入过滤,拖放,正则表达式,期刊,滑块,可排序,手风琴,开始学习MooTools工具提示,选项卡式内容,类,Fx.Element,Fx.Slide,Fx.Tween,Fx.Morph,Fx.Options,Fx.Events。

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
      onCancel
      onComplete      onChainComplete                     Start A         Start B         Reset         Pause         Resume                  Element 0      Element 1      

您将收到以下输出 :

输出

t({ id: "Jzndc69N7BtnPgpT", ck: "Jzndc69N7BtnPgpT" }) k.51.la/js-sdk-pro.min.js">