MooTools - Fx.Morph
Fx.Morph là một chức năng được cung cấp bởi MooTools. Nó được sử dụng để tạo tween mới để chuyển đổi giữa các thuộc tính kiểu. Trong khi biến hình, chúng ta phải chọn phần tử với một đối tượng và sau đó chúng ta có thể áp dụng các chức năng khác nhau cho nó. Chúng ta cũng cần liên kết phần tử với một tween mới được tạo.
Hãy để chúng tôi lấy một ví dụ cung cấp ba nút trên một trang web. Cái đầu tiên làSETnút tạo một phần tử có các thuộc tính kiểu như chiều cao, chiều rộng và màu sắc. Cái thứ hai làMORPHnút thay đổi thuộc tính kiểu của một phần tử. Cái thứ ba làRESETnút thay đổi tất cả các cài đặt về vị trí bắt đầu. Hãy xem đoạn mã sau.
Thí dụ
<!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>Bạn sẽ nhận được kết quả sau: