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 オブジェクトを介して利用できます。通常のオブジェクトにアクセスできるため、セットでetcoptionsを使用することが可能になります。スコープは、デビッドのデモのような要素ではなく、インスタンスにunit正しくバインドされます。Fx
  • 要素の新しいクラスをインスタンス化する

Fx.Tween.js ソースを見てください。Fx.CSS.Parser通常、クラスは Fx.Tween を拡張します。この修正は一種のアンチパターン/ハックですElement.Styles。Fxの直接的なインスタンス化はまったく一般的ではありません :) Fx は他のプロパティと同じように機能します。

  • 委任を介して単一のイベントを親に追加します。
于 2013-11-14T23:23:20.870 に答える