3

我正在尝试使用 mooTools Fx 来缩放 div 的背景图像。我按照大卫威尔士的文章进行自定义转换。我的 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();}
    });
});
4

1 回答 1

4

因为这看起来很有趣，所以我以 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));

解释：

  • 关闭。好的做法。
  • 创建一个扩展 Fx 的子类，但需要一个新参数，即元素 - 类似于 Fx.Morph 和 Fx.Tween 的工作方式。好处是：可通过 Fx 对象在任何地方使用。可以访问普通options对象，因此可以unit在集合中使用 etc。范围将正确绑定到Fx实例，而不是大卫演示中的元素。
  • 为元素实例化一个新类

查看 Fx.Tween.js 源代码。通常你的类扩展 Fx.Tween，这个修复是一种反模式/黑客，Fx 直接实例化根本不常见:) 你真的应该扩展Fx.CSS.ParserandElement.Styles属性而不是能够读取/解析你需要的内容和Fx 将与任何其他属性一样工作。

  • 通过委托向父级添加单个事件。
于 2013-11-14T23:23:20.870 回答