Mootools - 檢測一個css類的實例

Question

我有一個網站，我已經添加了一些基本的Mootools動畫。這裏是我有個問題關於該網站的頁面：

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

你會發現，當你將鼠標放在大圖像，它們褪色，放大鏡充斥了下來。這裏是叫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'); 
}); 

我希望能夠做的就是簡單的給每個元素我希望有此功能的CSS類的「放大，所以我不必須使用不同的ID號，並添加MooTools的另一個類的實例

如果我的元素是一個CSS類並放到我的Mootools類中，它就會中斷，即使它沒有中斷，看起來Mootools似乎只會使該CSS類的所有元素都具有相同的動畫效果當只有一個被隱藏起來的時候

我該如何檢測哪個「magnify CSS class正在被淹沒？我唯一的想法是找到一種方法來抓住所有具有「magnify」CSS類的元素，將它們放入一個數組中，然後檢查被懸停的項是否等於數組中的某個項。我不知道該怎麼做，或者如果這是最好的方法。

任何幫助或建議將是偉大的！讓我知道你是否想看更多的代碼，或者如果我能更好地解釋一些東西。謝謝！

Answer 1

你需要編碼更多的模式。首先 - 你有2個元素的關係 - 一個包含div和一個圖像。

你的事件實際上是在父EL，但你也需要引用和動畫的內部元素（圖像）。

如果你想抓住所有的圖像，你的選擇器只是div.item-port > img。 div.item-port > img ! div.item-port將抓取父div，而不是那些只有直接子圖像的父div。等等。

然後你需要決定什麼元素附加事件。你的標記有很多選擇。

甚至在你到達那裏之前，你有一個包裝你的元素的一個href。它允許你使用跨瀏覽器：hover pseudo。

，你可以很容易做純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'); 

簡化爲是可行的多，但你的想法 - 從IDS和任何這種重複特異性完全明確。