我正在尝试使用mooTools Fx缩放div的背景图像。我跟随david welshs article进行自定义转换。我的mooTools / js技能非常基础,所以
我也想知道是否有可能合并使用例如正弦转换(尽管看起来不像)。
这是我尝试的:http://jsfiddle.net/q2GQ7/
Javascript:
$$('#program a').each(function(item, index){
item.store('BackgroundZoomer', new Fx({ duration: 250}));
});
$$('#program a').each(function(item, index){
item.retrieve('BackgroundZoomer').set = function(value) {
var style = 200+value + "px " +200+value + "px";
this.setStyle('background-size', style);
};
});
$$('#program a').each(function(item, index){
addEvents({
'mouseenter': function(){
item.retrieve('BackgroundZoomer').start(0, 200); },
'mouseleave': function(){
item.retrieve('BackgroundZoomer').cancel();}
});
});
最佳答案
由于这看起来很有趣,所以我以MooTools的方式[tm]编写了一些代码来入门。我通常不这样做,因为这与SO风格相反,但我想念使用MooTools的情况。嗯...
http://jsfiddle.net/dimitar/dNd3H/
(function(){
'use strict';
var Fx = this.Fx;
// keep the set override private
Fx.Background = new Class({
Extends: Fx,
initialize: function(element, options){
this.element = element;
this.parent(options);
},
set: function(value, u){
u = this.options.unit;
this.element.setStyle('background-size', [value, u, ' ', value, u].join(''));
return this;
}
});
document.getElements('#program a').each(function(item) {
item.store('fxb', new Fx.Background(item, {
duration: 250,
link: 'cancel',
unit: '%' // change to px or em
}));
});
document.id('program').addEvents({
'mouseover:relay(a)': function(){
// 100% to 200%
this.retrieve('fxb').start(100,200);
},
'mouseout:relay(a)': function(){
// 200% back to 100%
this.retrieve('fxb').start(200,100);
}
});
}.call(this));
说明:
options
对象,因此可以在集合中使用unit
等。范围将正确绑定(bind)到Fx
实例,而不是像David的演示中那样的元素。