{"id":645,"date":"2008-12-15T08:12:37","date_gmt":"2008-12-15T00:12:37","guid":{"rendered":"http:\/\/fdream.net\/blog\/article\/645.aspx"},"modified":"2008-12-14T18:12:44","modified_gmt":"2008-12-14T10:12:44","slug":"Mootools+1.2%e6%95%99%e7%a8%8b(22)%e2%80%94%e2%80%94%e5%90%8c%e6%97%b6%e8%bf%9b%e8%a1%8c%e5%a4%9a%e4%b8%aa%e5%bd%a2%e5%8f%98%e5%8a%a8%e7%94%bb","status":"publish","type":"post","link":"https:\/\/fdream.net\/blog\/article\/645","title":{"rendered":"Mootools 1.2\u6559\u7a0b(22)\u2014\u2014\u540c\u65f6\u8fdb\u884c\u591a\u4e2a\u5f62\u53d8\u52a8\u753b"},"content":{"rendered":"

\u539f\u6587\u5730\u5740\uff1a30 Days of Mootools 1.2 Tutorials – Day 22 – Fx.Elements<\/a><\/p>\n

\u901a\u8fc7Fx.Elements\u540c\u65f6\u5904\u7406\u591a\u4e2a\u5f62\u53d8\u52a8\u753b<\/h2>\n

\u8bf7\u5c0a\u91cd\u4e2a\u4eba\u52b3\u52a8\uff0c\u8f6c\u8f7d\u8bf7\u6ce8\u660e\u51fa\u5904\uff1ahttp:\/\/fdream.net\uff0c\u8bd1\u8005\uff1aFdream<\/p>\n

\u5982\u679c\u4f60\u8fd8\u6ca1\u6709\u51c6\u5907\u597d\u5f00\u59cb\u8fd9\u4e00\u8bb2\uff0c\u8bf7\u53c2\u8003\u8fd9\u4e00\u7cfb\u5217\u7684\u6559\u7a0b\uff0c\u8fd9\u91cc\u662f\u300aMooTools 1.2\u7cfb\u5217\u6559\u7a0b\u76ee\u5f55\u300b<\/a>\u3002<\/p>\n

\u4eca\u5929\u6211\u4eec\u6765\u5b66\u4e60\u4e00\u4e0bFx.Elements\u63d2\u4ef6\uff0c\u8fd9\u662f\u4e00\u4e2a\u57fa\u4e8eFx.Morph\u7684\u63d2\u4ef6\u3002\u4e0e\u5e94\u7528\u4e8e\u5355\u4e2a\u5143\u7d20\u4e0d\u540c\u7684\u662f\uff0cFx.Elements\u53ef\u4ee5\u5141\u8bb8\u4f60\u4e00\u6b21\u6027\u7ed9\u591a\u4e2a\u5143\u7d20\u6dfb\u52a0\u52a8\u753b\u3002\u8fd9\u5728\u4f60\u7ed9\u591a\u4e2a\u5143\u7d20\u6dfb\u52a0\u6709\u76f8\u540c\u9009\u9879\u7684\u5f62\u53d8\u52a8\u753b\u65f6\u975e\u5e38\u6709\u7528\u3002\u5c31\u50cf\u6211\u4eec\u5728\u7b2c20\u8bb2\u4e2d\u770b\u5230\u7684\u6700\u540e\u4e00\u4e2a\u4f8b\u5b50<\/a>\u4e00\u6837\u3002<\/p>\n

\u57fa\u672c\u7528\u6cd5<\/h3>\n

\u4f7f\u7528Fx.Elements\u7684\u65b9\u6cd5\u770b\u8d77\u6765\u548cFx.Morph\u5dee\u4e0d\u591a\u3002\u8fd9\u4e24\u8005\u4e4b\u95f4\u7684\u533a\u522b\u5728\u4e8e.start({})\u65b9\u6cd5\u548c.set({})\u65b9\u6cd5\u3002<\/p>\n

\u4e3a\u4e86\u4fdd\u8bc1\u4e8b\u60c5\u7b80\u6d01\uff0c\u8ba9\u6211\u4eec\u9996\u5148\u5efa\u7acb\u4e00\u4e2a\u5143\u7d20\u6570\u7ec4\uff0c\u4ee5\u7528\u6765\u4f20\u9012\u7ed9Fx.Elements\u3002<\/p>\n

\nvar fxElementsArray = $$('.myElementClass');\n<\/pre>\n<\/p>\n
\u73b0\u5728\u6211\u4eec\u5c31\u53ef\u4ee5\u628a\u6211\u4eec\u7684\u6570\u7ec4\u4f20\u9012\u7ed9Fx.Elements\u5bf9\u8c61\u4e86\u3002<\/p>\n
\nvar fxElementsObject = new Fx.Elements(fxElementsArray, {\n    \/\/ Fx\u9009\u9879\n    link: 'chain',\n    duration: 1000,\n    transition: 'sine:in:out',\n \n    \/\/ Fx\u4e8b\u4ef6\n    onStart: function(){\n        startInd.highlight('#C3E608');\n    }\n});\n<\/pre>\n<\/p>\n
\u548cFx.Morph\u4e00\u6837\uff0cFx.Elements\u6269\u5c55\u4e86Fx\u7c7b\uff0c\u53ef\u4ee5\u5141\u8bb8\u4f60\u4f7f\u7528Fx\u7684\u5168\u90e8\u9009\u9879\u548c\u4e8b\u4ef6<\/a>\u3002<\/p>\n
.start({})\u548c.set({})\u65b9\u6cd5<\/h3>\n
\u8981\u5f00\u59cb\u4e00\u4e2aFx.Elements\u6548\u679c\uff0c\u6216\u8005\u4f7f\u7528Fx.Elements\u8bbe\u7f6e\u6837\u5f0f\uff0c\u4f60\u53ef\u4ee5\u50cf\u4f7f\u7528Fx.Tween\u548cFx.Morph\u90a3\u6837\u505a\uff0c\u4e0d\u8fc7\u4e0d\u662f\u76f4\u63a5\u628a\u8bbe\u7f6e\u76f4\u63a5\u5e94\u7528\u5230Fx.Elements\u5bf9\u8c61\u4e0a\uff0c\u800c\u662f\u901a\u8fc7\u7d22\u5f15\u5f15\u7528\u5bf9\u5e94\u7684\u5143\u7d20\u2014\u2014\u7b2c\u4e00\u4e2a\u5143\u7d20\u662f0\uff0c\u7b2c\u4e8c\u4e2a\u662f1\uff0c\u4ee5\u6b64\u7c7b\u63a8\u3002<\/p>\n
\n\/\/ \u4f60\u53ef\u4ee5\u7528.set({...})\u6765\u8bbe\u7f6e\u6837\u5f0f\nfxElementsObject .set({\n    '0': {\n        'height': 10,\n        'width': 10,\n        'background-color': '#333'\n    },\n    '1': {\n        'width': 10,\n        'border': '1px dashed #333'\n    }\n});\n \n\/\/ \u6216\u8005\u7528.start({...})\u521b\u5efa\u6e10\u53d8\u52a8\u753b\nfxElementsObject .start({\n    '0': {\n        'height': [50, 200],\n        'width': 50,\n        'background-color': '#87AEE1'\n    },\n    '1': {\n        'width': [100, 200],\n        'border': '5px dashed #333'\n    }\n});\n<\/pre>\n<\/p>\n
\u5c31\u50cfFx.Morph\uff0c\u4f60\u53ef\u4ee5\u4e3a\u5143\u7d20\u7684\u6e10\u53d8\u52a8\u753b\u8bbe\u5b9a\u4efb\u4f55\u4e00\u4e2a\u5f00\u59cb\u503c\u548c\u7ed3\u675f\u503c\uff0c\u4f60\u4e5f\u53ef\u4ee5\u53ea\u8bbe\u7f6e\u4e00\u4e2a\u53c2\u6570\uff08\u5c31\u50cf\u6211\u4eec\u4e0a\u9762\u53ea\u7ed9\u5bbd\u5ea6\u8bbe\u7f6e\u4e86\u4e00\u4e2a\u503c\uff09\uff0c\u90a3\u4e48\u8fd9\u4e2a\u5143\u7d20\u5c06\u4f1a\u4ece\u5f53\u524d\u503c\u53d8\u5316\u5230\u65b0\u53c2\u6570\u6307\u5b9a\u7684\u503c\u3002<\/p>\n
\u8fd9\u5c31\u662f\u5173\u4e8eFx.Elements\u7684\u5168\u90e8\u5185\u5bb9\u4e86\u3002\u53ef\u4ee5\u770b\u770b\u4e0b\u9762\u7684\u4f8b\u5b50\uff0c\u770b\u770b\u5b83\u4eec\u662f\u600e\u4e48\u4f7f\u7528\u7684\u3002<\/p>\n
\u793a\u4f8b\u4ee3\u7801<\/h3>\n
\u8fd9\u91cc\u6211\u4eec\u5bf9\u4e24\u4e2a\u5143\u7d20\u4f7f\u7528\u4e86Fx.Elements\u3002\u5728\u6e10\u53d8\u52a8\u753b\u4e2d\u6709\u51e0\u4e2a\u4e0d\u540c\u7684\u7c7b\u578b\u53ef\u4ee5\u9009\u62e9\uff0c\u540c\u65f6\u6682\u505c\u6309\u94ae\u53ef\u4ee5\u8ba9\u4f60\u6682\u505c\u52a8\u753b\u3002<\/p>\n
\u9996\u5148\uff0c\u6211\u4eec\u6765\u521b\u5efa\u6211\u4eec\u7684\u5143\u7d20\uff0c\u6211\u4eec\u7684\u53ef\u80fd\u544a\u77e5\u6309\u94ae\uff08\u5305\u62ec\u91cd\u7f6e\uff08reset\uff09\u6309\u94ae\u3001\u6682\u505c\uff08pause\uff09\u6309\u94ae\u548c\u6062\u590d\uff08resume\uff09\u6309\u94ae\uff09\uff0c\u8fd8\u6709\u4e00\u4e9b\u6307\u793a\u5668\uff0c\u4ee5\u4fbf\u8ba9\u6211\u4eec\u770b\u660e\u767d\u8fd9\u4e2a\u8fc7\u7a0b\u3002<\/p>\n
\n<div id="start_ind" class="ind">onStart<\/div>\n<div id="cancel_ind" class="ind">onCancel<\/div>\n<div id="complete_ind" class="ind">onComplete<\/div>\n<div id="chain_complete_ind" class="ind">onChainComplete<\/div>\n<span id='buttons'>\n    <button id="fxstart">Start A<\/button>\n        <button id="fxstartB">Start B<\/button>\n        <button id="fxset">Reset<\/button>\n        <button id="fxpause">Pause<\/button>\n        <button id="fxresume">Resume<\/button>\n<\/span>\n<div class="myElementClass">Element 0<\/div>\n<div class="myElementClass">Element 1<\/div>\n<\/pre>\n<\/p>\n
\u6211\u4eec\u7684CSS\u4ee3\u7801\u4e5f\u5f88\u7b80\u5355<\/p>\n
\n.ind {\n    width: 200px;\n    padding: 10px;\n    background-color: #87AEE1;\n    font-weight: bold;\n    border-bottom: 1px solid white;\n}\n \n.myElementClass {\n    height: 50px;\n    width: 100px;\n    background-color: #FFFFCC;\n    border: 1px solid #FFFFCC;\n    padding: 20px;\n}\n \n#buttons {\n    margin: 20px 0;\n    display: block;\n}\n<\/pre>\n<\/p>\n
\u4e0b\u9762\u662fMooTools\u4ee3\u7801\u3002<\/p>\n
\nvar startFXElement = function(){\n    this.start({\n        '0': {\n            'height': [50, 200],\n            'width': 50,\n            'background-color': '#87AEE1'\n        },\n        '1': {\n            'width': [100, 200],\n            'border': '5px dashed #333'\n        }\n    });\n}\n \nvar startFXElementB = function(){\n    this.start({\n        '0': {\n            'width': 500,\n            'background-color': '#333'\n        },\n        '1': {\n            'width': 500,\n            'border': '10px solid #DC1E6D'\n        }\n    });\n}\n \n \nvar setFXElement = function(){\n    this.set({\n        '0': {\n            'height': 50,\n            'background-color': '#FFFFCC',\n            'width': 100\n        },\n        '1': {\n            'height': 50,\n            'width': 100,\n            'border': 'none'\n        }\n    });\n}\n \n \nwindow.addEvent('domready', function() {\n    var fxElementsArray = $$('.myElementClass');\n \n    var startInd = $('start_ind');\n    var cancelInd = $('cancel_ind');\n    var completeInd = $('complete_ind');\n    var chainCompleteInd = $('chain_complete_ind');\n \n    var fxElementsObject = new Fx.Elements(fxElementsArray, {\n        \/\/Fx Options\n        link: 'chain',\n        duration: 1000,\n        transition: 'sine:in:out',\n \n        \/\/Fx Events\n        onStart: function(){\n            startInd.highlight('#C3E608');\n        },\n        onCancel: function(){\n            cancelInd.highlight('#C3E608');\n        },\n        onComplete: function(){\n            completeInd.highlight('#C3E608');\n        },\n        onChainComplete: function(){\n            chainCompleteInd.highlight('#C3E608'); \n        }\n    });\n \n    $('fxstart').addEvent('click', startFXElement.bind(fxElementsObject));\n    $('fxstartB').addEvent('click', startFXElementB.bind(fxElementsObject));\n \n    $('fxset').addEvent('click', setFXElement.bind(fxElementsObject));\n    $('fxpause').addEvent('click', function(){\n        fxElementsObject.pause();\n    });\n \n    $('fxresume').addEvent('click', function(){\n        fxElementsObject.resume();\n    });\n});\n<\/pre>\n<\/p>\n
\n