1

基本的なMootoolsアニメーションを追加したWebサイトがあります。これが私が質問をしているウェブサイトのページです：

http://www.humsdrums.com/portfolio/webdesign.html

大きな画像の上にマウスを置くと、画像がフェードし、虫眼鏡がトゥイーンダウンすることに気付くでしょう。これが私がこれのために作った「Magnify」と呼ばれるMootoolsクラスです：

var Magnify = new Class({

Implements : [Options, Events],


options : {

    },

initialize : function (item, image, options)
{
    this.setOptions(options);
    this.div = document.id(item);
    this.img = $$(image);

    this.tweenBackground = new Fx.Tween(this.div,{
        duration:'250',
        property:'background-position'

    });

    this.div.addEvent('mouseenter', this.reveal.bind(this));

    this.div.addEvent('mouseleave', this.hide.bind(this));

},

reveal : function()
{
    this.tweenBackground.cancel();
    this.tweenBackground.start('175px -78px', '175px 90px');
    this.img.tween('opacity', .15);
    console.log('mouse over');


},

hide :function ()
{
    this.tweenBackground.cancel();
    this.tweenBackground.start('175px 90px', '175px -78px');
    this.img.tween('opacity', 1);


}

});

次に、css idを取得して、これを実行する要素ごとにクラスのインスタンスを初期化する必要があります。 

window.addEvent('domready', function()
{

var magnify1 = new Magnify('p1', '#p1 img');
var magnify2 = new Magnify('p2', '#p2 img');
var magnify3 = new Magnify('p3', '#p3 img');
var magnify4 = new Magnify('p4', '#p4 img');
});

私ができるようにしたいのは、この機能を持たせたい各要素に「拡大するので、個々のIDを使用して、毎回Mootoolsクラスの別のインスタンスを追加する必要がないようにする」というCSSクラスを与えることです。

要素をCSSクラスにして、それをMootoolsクラスに入れると、壊れます。それが壊れなかったとしても、Mootoolsは、1つだけがマウスオーバーされたときに、そのCSSクラスを持つすべての要素を同時にアニメートするように思われます。

「magnifyCSSクラスのどのインスタンスがマウスオーバーされているかをどのように検出しますか？私の唯一の考えは、「magnify」CSSクラスですべての要素を取得し、それらを配列に入れて、ホバーされているアイテムは、配列内のアイテムの1つと同じです。その方法や、それが最善の方法かどうかはわかりません。

どんな助けや提案も素晴らしいでしょう！もっとコードを見たいのか、もっと良い説明ができるのか教えてください。

4

1 に答える 1

0

より多くのパターンにコーディングする必要があります。まず第一に-あなたは2つの要素の関係を持っています-それを含むdivと画像。

イベントは実際には親el上にありますが、内部要素（画像）を参照してアニメーション化する必要もあります。

セレクターは、div.item-port > imgすべての画像を取得したい場合に使用します。div.item-port > img ! div.item-port直接の子としてのみイメージを持つものではなく、親のdivを取得します。等

次に、イベントをアタッチする要素を決定する必要があります。マークアップには多くの選択肢があります。

そこにたどり着く前に、両方の要素をラップするhrefがあります。これにより、クロスブラウザ：hoverpseudoを使用できます。

あなたは純粋なCSSで非常に簡単に行うことができます：

div.port-item {
    /* defaults you already have and then ... */
    background-position: 175px -78px;
    -webkit-transition: all 0.2s ease-out 0s;
    -moz-transition: all 0.2s ease-out 0s;
    -ms-transition: all 0.2s ease-out 0s;
    -o-transition: all 0.2s ease-out 0s;
    transition: all 0.2s ease-out 0s;
}

.portfolio-item a:hover div.port-item {
    background-position: 175px 90px;
}

.portfolio-item a:hover img {
    opacity: .15; // etc for cross-browser
}

ブラウザがトランジションをサポートしていないときに回復したい場合にのみ、jsクラスをインスタンス化する必要があります。http://jsfiddle.net/wMnzb/4/

var Magnify = new Class({

  Implements: [Options],

  options: {
    parent: 'div'
  },

  initialize: function (images, options) {
    this.setOptions(options);
    this.elements = document.getElements(images);
    this.attachEvents();
  },
  attachEvents: function () {
    var selector = this.options.parent;
    this.elements.each(function (el) {
      var parent = el.getParent(selector);

      parent.set('tween', {
        duration: '250',
        link: 'cancel'
      });
      parent.addEvents({
        mouseenter: function () {
          this.tween('background-position', '175px 90px');
          el.fade(0.15);
        },
        mouseleave: function () {
          this.tween('background-position', '175px -78px');
          el.fade(1);
        }
      });
    });
  }   

});

new Magnify('div.port-item > img');

可能な限り単純化されていますが、IDやそのような反復的な特異性から完全にあいまいなアイデアが得られます。

于 2013-01-10T23:17:20.547 に答える