MooTools-Fx.Morph
Fx.Morph는 MooTools에서 제공하는 기능입니다. 스타일 속성 간의 전환을위한 새 트윈을 만드는 데 사용됩니다. 모핑하는 동안 객체가있는 요소를 선택한 다음 다른 기능을 적용 할 수 있습니다. 또한 새로 만든 트윈으로 요소를 바인딩해야합니다.
웹 페이지에 세 개의 버튼을 제공하는 예를 들어 보겠습니다. 첫 번째는SET높이, 너비 및 색상과 같은 스타일 속성이있는 요소를 만드는 버튼입니다. 두 번째는MORPH요소의 스타일 속성을 변경하는 버튼입니다. 세 번째는RESET모든 설정을 시작 위치로 변경하는 버튼. 다음 코드를 살펴보십시오.
예
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
var morphSet = function(){
this.set({
'width': 100,
'height': 100,
'background-color': '#884EA0'
});
}
var morphStart = function(){
this.start({
'width': 200,
'height': 200,
'background-color': '#d3715c'
});
}
var morphReset = function(){
this.set({
'width': 0,
'height': 0,
'background-color': '#ffffff'
});
}
window.addEvent('domready', function() {
var morphElement = $('morph_element');
var morphObject = new Fx.Morph(morphElement);
$('set').addEvent('click', morphSet.bind(morphObject));
$('start').addEvent('click', morphStart.bind(morphObject));
$('reset').addEvent('click', morphReset.bind(morphObject));
});
</script>
</head>
<body>
<div id = "morph_element"> </div><br/>
<input type = "button" id = "set" value = "SET"/>
<input type = "button" id = "start" value = "START"/>
<input type = "button" id = "reset" value = "RESET"/>
</body>
</html>다음과 같은 출력을 받게됩니다.