使用mootools Fx来缩放背景大小

Question

使用mootools Fx来缩放背景大小

3

我正在尝试使用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();}
    });
});

- Patrick

你的小提琴向控制台抛出错误。 - hugo der hungrige

@hugoderhungrige 谢谢，我刚刚更新了它。现在这不是语法问题了，而是逻辑问题。不确定如何将效果应用到元素上。 - Patrick

我仍然遇到了“意外的标记)”错误 :) - hugo der hungrige

等等，什么？Backgroundzoomer是Fx类的一个实例，但你尝试创建该实例的一个实例，这不是构造函数？有些问题。我责怪David，但这就是阿森纳球迷得到的东西。 - Dimitar Christoff

你说得对...那很奇怪。我已经改了，但似乎这不是预期的工作方式。我需要为每个元素创建一个新的Fx对象吗？ - Patrick

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Dimitar Christoff · Accepted Answer

由于这看起来很有趣，我用MooTools的方式编写了一些代码来帮助你入门。通常我不会这样做，因为这与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));

解释：

闭包是良好的实践。
创建一个继承 Fx 的子类，但期望一个新的参数——与 Fx.Morph 和 Fx.Tween 类似——元素。其好处是：可以在任何地方通过 Fx 对象使用。可以访问普通的 options 对象，因此可以在设置中使用 unit 等。作用域将正确绑定到 Fx 实例，而不是像 David 的演示中那样绑定到元素。
为元素实例化一个新类。

查看 Fx.Tween.js 源代码。通常你的类会继承 Fx.Tween，这个修复方法有点反模式/黑客，Fx 实例化直接并不常见 :) 你真的应该只扩展 Fx.CSS.Parser 和 Element.Styles 属性，以便能够读取/解析所需的内容，Fx 将像处理任何其他属性一样工作。

通过委托向父级添加单个事件。