mootools 元素追加
We all know that MooTools 1.2 can do some pretty awesome animations. What if we want to quickly make two element swap positions without a lot of fuss? Now you can by implementing a MooTools swap() method.
我们都知道MooTools 1.2可以制作一些非常棒的动画。 如果我们要快速建立两个元素互换位置而又不用大惊小怪怎么办? 现在,您可以通过实现MooTools swap()方法。
MooTools 1.2实施 (MooTools 1.2 Implementation)
Element.implement({
swap: function(other,speed) {
//get the position
position1 = this.getCoordinates();
position2 = other.getCoordinates();
//position this where it is
this.setStyles({
top: position1.top + 'px',
left: position1.left + 'px',
position: 'absolute'
});
//position the other element where it is
other.setStyles({
top: position2.top + 'px',
left: position2.left + 'px',
position: 'absolute'
});
//fx
var myFx = new Fx.Morph(this,{
duration: speed
}).start({
'top': position2.top + 'px',
'left': position2.left + 'px'
});
//fx
var myFx2 = new Fx.Morph(other,{
duration: speed
}).start({
'top': position1.top + 'px',
'left': position1.left + 'px'
});
}
});
MooTools 1.2用法 (MooTools 1.2 Usage)
window.addEvent('domready', function() {
//swap the two elements when a trigger is clicked
$('trigger').addEvent('click',function(e) {
$('element1').swap($('element2'),300);
});
});
To call the swap method, simply pass the second element and transition speed and watch the element swap position!
要调用swap方法,只需传递第二个元素和过渡速度并观察元素的交换位置!
What would you use this for? Anything practical or just for fun?
您将用它做什么? 实用还是娱乐?
mootools 元素追加